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>
        );
    }
}