React Navigation

React Navigation - 使用说明

开始使用React Navigation，必须先创建一个navigator,React Navigation带有三种默认的navigator。

1. StackNavigator - 为应用程序提供了一种页面切换的方法，每次切换时，新的页面会放置在堆栈的顶部
2. TabNavigator - 用于设置具有多个Tab页的页面
3. DrawerNavigator - 用于设置抽屉导航的页面

StackNavigator:实现不同页面之间的跳转

<Stack.Navigator
    screenOptions={{
        headerStyle: {
        backgroundColor: '#f4511e',
        },
        // headerBackVisible: false,
        //隐藏顶部导航栏：headerShown: false,
        headerTitleAlign: 'center',
        headerTintColor: '#fff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
    }} >
    <Stack.Screen
        name="home"
        component={Home}
        options={{
          title: '首页'
        }}
      />
      <Stack.Screen
        name="detail"
        component={Detail}
      />
    </Stack.Navigator>

页面跳转及参数传递：

navigation.navigate('detail',{userName:'张三'})

使用params:

options={({ route }) => ({ title: route.params.name })}
//title 必须是字符串类型

setOptions:

navigation.setOptions({ title: 'Updated!' })

screenOptions:

通用样式往可以往父级加screenOptions属性

TabNavigator:用导航栏实现不同页面间的跳转

TabNavigator生成的底部导航的结构包括选项卡栏，选项卡，图标以及标签文本四部分。

//用于显示或隐藏标签栏
const screens=['home','set','userinfo']
const tabbarIsVisible = (route) => {
  const routeName = getFocusedRouteNameFromRoute(route)
  return screens.includes(routeName)
}
<Tab.Navigator
      screenOptions={{
        headerShown: false,
      }}>
        <Tab.Screen name="homeScreen" component={HomeScreen}
          options={({route}) => {
            return {
              title: '首页',
              //选项卡，自定义图标
              tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} />,
              tabBarStyle:{display:tabbarIsVisible(route) ? 'block' : 'none'}
            }
          }} />
        <Tab.Screen name="setting" component={Setting}
          options={{
            title: '设置',
            tabBarIcon: ({ color, size }) => <Ionicons name="settings" size={size} color={color} />,
          }} />
      </Tab.Navigator>

DrawerNavigator:从侧边栏划出抽屉一样的效果