[RN] React Navigation Docs(7) - Tab Navigator

React Navigation Docs시리즈에서는 React Navigation 공식 홈페이지(https://reactnavigation.org)에 있는 내용을 정리해 보고자 합니다. 자세한 내용은 링크를 참고해주세요.

[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params

[RN] React Navigation Docs(3) - navigationOptions

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator

Note: createTabNavigator is deprecated. Please use createBottomTabNavigator and/or createMaterialTopTabNavigator instead.

createTabNavigator는 더 이상 사용되지 않습니다. createBottomTabNavigator를 사용하거나 createMaterialTopTabNavigator를 대신 사용해 주십시오.

createTabNavigator 페이지에 확인해 보면 위와 경고문이 뜨는 것을 확인할 수 있습니다. 그래서 저는 createMaterialTopTabNavigator 로 공부했습니다.

createMaterialTopTabNavigator

제가 createBottomTabNavigator와 createMeterialTopTabNavigator 중 후자를 선택한 이유는 후자가 옵션이 더 많기 때문입니다.

다음은 createMaterialTopTabNavigator 로 Tab Navigator를 이쁘게 꾸민 코드입니다.

import * as React from "react";
import { StyleSheet, Dimensions, View } from "react-native";
import { Button, Text } from "react-native-paper";
import { createMaterialTopTabNavigator } from "react-navigation";
import { NavigationScreenProps } from "react-navigation";
export class EthereumScreen extends React.Component<NavigationScreenProps> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.summaryHeader}>
          <Button
            style={styles.leftbutton}
            mode="contained"
            onPress={this.navigateToEthereum}
          >
            ETH
          </Button>
          <Button
            style={styles.rightbutton}
            mode="contained"
            onPress={this.navigateToBitcoin}
          >
            BTC
          </Button>
        </View>
        <View style={styles.userBody}>
          <Text>
            이더리움
          </Text>
        </View>
      </View>
    );
  }
  navigateToEthereum = () => {
    this.props.navigation.navigate("Ethereum")
  };
  navigateToBitcoin = () => {
    this.props.navigation.navigate("Bitcoin")
  }
}
export class BitcoinScreen extends React.Component<NavigationScreenProps> {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.summaryHeader}>
          <Button
            style={styles.leftbutton}
            mode="contained"
            onPress={this.navigateToEthereum}
          >
            ETH
          </Button>
          <Button
            style={styles.rightbutton}
            mode="contained"
            onPress={this.navigateToBitcoin}
          >
            BTC
          </Button>
        </View>
        <View style={styles.userBody}>
          <Text>
            비트코인
          </Text>
        </View>
      </View>
    );
  }
  navigateToEthereum = () => {
    this.props.navigation.navigate("Ethereum")
  };
  navigateToBitcoin = () => {
    this.props.navigation.navigate("Bitcoin")
  }
}
export const InitialRoute = createMaterialTopTabNavigator (
    {
        Ethereum: EthereumScreen,
        Bitcoin: BitcoinScreen
    },
    {
        tabBarOptions: {
            style:{
              height:0
            }
        }
    }
);

tabBarOptions에서 style 속성에 height를 0으로 초기화하고 탭을 새로 꾸며주었습니다.

 

[RN] React Navigation Docs(1) - navigate

[RN] React Navigation Docs(2) - params

[RN] React Navigation Docs(3) - navigationOptions

[RN] React Navigation Docs(4) - App containers

[RN] React Navigation Docs(5) - Switch Navigator

[RN] React Navigation Docs(6) - Drawer Navigator