react-navigation 3.x版本的使用

 

安裝配置請看： 

react-navigation 3.x版本的安裝以及react-native-gesture-handler配置

 

2.0以前版本：

• StackNavigator - 一次只渲染一個頁面，並提供頁面之間跳轉的方法。 當打開一個新的頁面時，它被放置在堆棧的頂部
• TabNavigator - 渲染一個Tab選項卡，讓用戶可以在幾個Tab頁面之間切換
• DrawerNavigator - 提供一個從屏幕左側滑入的抽屜，類似bilibili和QQ的隱藏在左側的內容欄功能

新版本：

　　StackNavigator  --> createStackNavigator  

　　TabNavigator  --> createBottomTabNavigator 也可以使用

　　createStackNavigator  返回的結果需要再用createAppContainer包裹　 const MainNavigator = createAppContainer(stackNavigator );

const TabBar = createBottomTabNavigator(
  {
    // 1:
    one: {
      screen: FirstPage,
      navigationOptions: () => ({
          tabBarIcon: ({ tintColor, focused  }) => (
            <MaterialCommunityIcons name="star-face" size={35} color={tintColor} />
          )
      })
    },
    //2:
     two: {
      screen: TwoPage,
      navigationOptions: () => ({
          tabBarIcon: ({ tintColor, focused  }) => (
            <MaterialCommunityIcons name="star-circle-outline" size={35} color={tintColor} />
          )
      })
    },
    //+:
    plus: {
      screen: PlusPage,
      navigationOptions: () => ({
          tabBarIcon: ({ tintColor, focused  }) => (
              focused ? <Ionicons name='md-add' size={45}  color={focused ? '#fb7299' : '#999'}/>
              : 
              <Ionicons name='md-add' size={45}  color={focused ? '#fb7299' : '#999'}/>
          )
      })
    },
    // 3: 
    three: {
      screen: ThreePage,
      navigationOptions: () => ({
          tabBarIcon: ({ tintColor, focused }) => (
            <Ionicons name="ios-color-filter" size={35} color={tintColor} />
          )
      })
    },
    //4:
    four: {
      screen: FourPage,
      navigationOptions: () => ({
          tabBarIcon: ({ tintColor, focused  }) => (
            <MaterialCommunityIcons onPress={() => {alert(tintColor)}} name="account-outline" size={35} color={tintColor} />
          )
      })
    }
  },
  {
    initialRouteName: 'one', // 初始化頁面
    //tabBarComponent: CustomTabBar,
    tabBarOptions: {
      activeTintColor: '#fb7299',
      inactiveTintColor: '#999'
    }
}

const StackNavigator = createStackNavigator(
  {
    MainTab: {  //路由
      screen: TabBar,
      navigationOptions: {
          header: null,
      }
    }
  }, 
  {
    initialRouteName: "MainTab"
  }
);

const MainNavigator = createAppContainer(StackNavigator);

export default class MainComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <MainNavigator  />
            </View>
        );
    }
}