【React Native】React Navigation 5.x的使用

前言

在App中，底部TabBar导航和顶部的导航栏导航是最常见的页面导航方式，而React Native官方推荐的第三方库是@react-navigation，正好今年React Navigation发布了5.0版本，与前面的版本差别还挺大，不过使用上更方便了。本文主要讲解React Navigation5.0及以上版本的使用。

安装

安装核心包

# NPM
npm install @react-navigation/native
# Yarn
yarn add @react-navigation/native

安装依赖

# NPM
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
#Yarn
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

React Native 0.60及以上版本是自动链接库的，不需要手动运行react-native link，但如果你用React Native开发的是iOS，还需要手动安装pods来完成库的链接：

npx pod-install ios

把下面这行代码放在入口文件的顶部，比如index.js或者App.js

import 'react-native-gesture-handler';

最后需要用NavigationContainer将整个App包裹起来，这个代码一般也是放在入口文件，类似下面这样：

import 'react-native-gesture-handler';
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

注意： 如果你同时也使用了Redux框架，需要把Provider放在最外层，将NavigationContainer包裹在次外层，类似下面这样：

export default class App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        {/* Screen configuration */}
      </NavigationContainer>
    </Provider>
  );
}

使用

React Navigation有多种导航方式：Stack Navigation、Tab Navigation和Drawer Navigation。这里主要讲Stack Navigation和Tab Navigation。

顶部导航栏导航

首先需要安装相应的库：

#NPM
npm install @react-navigation/stack
#Yarn
yarn add @react-navigation/stack

Stack Navigation使用上相对来说比较简单，只需要把需要导航的页面组件封装成Stack.Screen，然后包裹在Stack.Navigator就可以了，最上面的Stack.Screen就是默认页面。

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen key="Home" name="Home" component={HomeScreen} />
      </Stack.Navigator>
      <Stack.Screen key="detail" name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

也可以在Stack.Screen中设置导航栏的属性，设置导航栏属性options有两种方式，一种是带route参数的，一种是直接设置

/* 带route参数的options */
<Stack.Screen
    key={name}
    name={name}
    component={component}
    options={({route}) => ({
        headerTitle: route.name,
        headerStyle: {
            backgroundColor: '#01aaff',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
        headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        headerShown: true
    })}
/>
/* 直接设置options */
<Stack.Screen
    key={name}
    name={name}
    component={component}
    options={{
        headerTitle: 'name',
        headerStyle: {
            backgroundColor: '#01aaff',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            fontWeight: 'bold',
        },
        headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        headerShown: true
    }}
/>

注意： React框架使用的是虚拟DOM，使用diff算法刷新页面显示，在Stack.Screen中，需要添加key属性，否则会报警告。

在需要跳转到其他页面时只需要以下代码就可以了，后面跟的是参数。

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'anything you want here',
          });
        }}
      />
    </View>
  );
}

如果是用class方式创建的页面，代码会像下面这样：

export default class HomeScreen extends Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => {
                        this.props.navigation.navigate('Details', {
                            itemId: 86,
                            otherParam: 'anything you want here',
                        });
                    }}
                />
            </View>
        );
    }
}

注意： 导航跳转可以使用navigation.navigate或者navigation.push。如果使用navigate，会查找当前堆栈中是否有名字一样的路由，如果没有才创建新的路由并跳转，而push则会直接创建一个新的路由并跳转，也就是说可以重复多次跳转同一个页面。

堆栈导航的返回方式如下：

// 返回到上一页面
navigation.goBack()
// 返回到堆栈里第一个页面
navigation.popToPop()

底部导航栏导航

除了顶部导航栏，最常用的就是底部导航栏了，首先也需要安装相应的库：

# NPM
npm install @react-navigation/bottom-tabs
# Yarn
yarn add @react-navigation/bottom-tabs

底部导航栏的使用方法类似，需要将这些页面组件包装成Tab.Screen，导航则由框架内部完成，不需要手动控制：

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

底部导航栏属性可以按如下方式设置：

<Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>

顶部堆栈导航栏与底部导航栏嵌套

Stack Navigation和Tab Navigation可以相互多层嵌套，比如登录页跳转到带底部导航栏的主页面，需要把登录相关面和Tab.navigator一同放到同一个堆栈中，但官方不推荐这种方式，嵌套层次太多会导致维护起来特别麻烦。官方推荐使用一个变量控制当前显示的页面，把不相关的模块隔离在不同的堆栈中，类似下面这样：

const commonScreens = {
  Help: HelpScreen,
};

const authScreens = {
  SignIn: SignInScreen,
  SignUp: SignUpScreen,
};

const userScreens = {
  Home: HomeScreen,
  Profile: ProfileScreen,
};

<Stack.Navigator>
  {Object.entries({
    ...commonScreens,
    ...(isLoggedIn ? userScreens : authScreens),
  }).map(([name, component]) => (
    <Stack.Screen name={name} component={component} />
  ))}
</Stack.Navigator>;

像isLoggedIn这样的全局变量动态刷新页面使用Redux架构实现起来会简单一些，具体实现可以参考这篇教程。