React Navigation 5.x版本实战指南

若是你想了解React Navigation 5.x的基本的概念，能够查看我以前的发的一篇文章：React Navigation 5.x详解

若是说构成视图元素的基本单位是组件，那么构成应用程序的基本单位就是页面。在前端应用中，页面又称为路由，是应用程序页面的抽象概念。因为单页面的应用是不存在的，那么对于拥有多个页面的应用程序来讲，如何从一个页面平滑地过渡到另外一个页面，就是路由须要完成的事情。
在0.44版本以前。开发者能够直接使用官方提供的Navigator组件来实现页面的跳转，不过Navigator组件对于稍大的项目支持并非很友好，且代码的嵌套下降了代码的可读性。因此，官方推荐开发者使用react-navigation库来管理页面及其跳转。
目前，react-navigation支持三种导航功能，分别是Tab导航、Drawer导航和Stack导航，它们的含义以下。

• Tab Navigation：用于实现页面底部的Tab导航效果。
• Drawer Navigation：用于实现侧边栏抽屉导航效果。
• Stack Navigation：包含导航栏的页面导航组件，用于实现页面跳转。

其中，开发中使用的最多的仍是Stack Navigation。和使用其余的第三方库同样，使用react-navigation库以前须要先安装依赖脚本，以下所示。

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

上面的依赖库是必须安装的，它们是其它导航库的基础库，而且这些基础库安装完成以后，还须要在原生工程中连接原生插件。对于iOS环境来讲，打开原生iOS工程目录，而后执行pod install命令来安装原生插件便可。
对于Android环境来讲，因为最新的React Native使用到了不少的Androidx属性，因此使用react-navigation以前还须要在原生项目中添加Androidx属性的支持。使用Android Studio打开原生Android工程，而后在app/build.gradle文件中添加以下脚本代码。

android {
… //省略其余脚本
packagingOptions {
        pickFirst "lib/arm64-v8a/librealm-jni.so"
 }
}

configurations.all {
    resolutionStrategy {
        force "com.facebook.soloader:soloader:0.8.2"
    }
}

def useIntlJsc = false
dependencies {
    …      //省略其余脚本
    if (useIntlJsc) {
        implementation 'org.webkit:android-jsc-intl:+'
    } else {
        implementation 'org.webkit:android-jsc:+'
    }
}

从新编译项目，若是没有任何错误则说明成功集成react-navigation，若是遇到其余问题，你们能够根据提示进行修改。同时，因为Tab Navigation、Drawer Navigation和Stack Navigation属于不一样的库，因此实际使用过程当中还须要安装对应的功能库，以下所示。

npm install @react-navigation/stack          //Stack导航
npm install @react-navigation/bottom-tabs    //Tab导航
npm install @react-navigation/drawer         //Drawer导航

须要说明是，上面的三个库是相互独立的，使用时须要根据需求状况来安装对应的功能库。
react-navigation库一个最基本的功能就是实现路由的管理，路由管理使用的是Stack Navigation。借助Stack Navigation，开发者能够很轻松的管理路由页面。和Android中的Activity栈管理同样，每次打开一个的新页面时，新页面都会被放到路由栈的顶部。
首先，新建HomePage和DetailPage两个页面，代码以下。

const HomePage=(navigation)=> {

  function jumpDetail() {
    navigation.navigate('Detail');
  }

  return (
      <View style={styles.ct}>
        <TouchableOpacity style={styles.touchableStyle} onPress={jumpDetail}>
          <Text style={styles.txtStyle}>
            跳转详情页面
          </Text>
        </TouchableOpacity>

      </View>
  );
}

const DetailPage=()=> {
  return (
      <View style={styles.ct}>
        <Text style={{fontSize: 24}}>Detail Screen</Text>
      </View>
  );
}

接下来，使用createStackNavigator()函数建立一个路由堆栈导航器，记得使用export关键字导出文件，以下所示。

const Stack = createStackNavigator();

const RootStack= () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name='Home' component={HomePage}/>
                <Stack.Screen name='Detail' component={DetailPage}/>
            </Stack.Navigator>
        </NavigationContainer>);
}
export default RootStack;

其中，createStackNavigator()函数包含两个属性，即导航器和路由，分别对应NavigationContainer和Stack.Navigator两个组件，而后再最外层使用导航状态组件NavigationContainer进行包裹便可。
最后，React Native应用的App.js入口文件中引入堆栈导航器RootStack便可，以下所示。

const App = () => {
    return (
        <RootStack/>
    );
};

运行上面的代码，点击HomePage的跳转按钮便可跳转到DetailPage页面，效果下图所示。

若是路由跳转时须要传递参数，能够在页面跳转时使用花括号包裹须要传递的参数，以下所示。

navigation.navigate('Detail',{
    itemId: 86,
    otherParam: 'anything you want here',
 });

而后，在接收参数的页面使用route接收便可，以下所示。

const DetailPage=(router,navigation)=> {
  const { itemId } = route.params;
  const { otherParam } = route.params;
  … //省略其余代码
}

同时，Stack Navigation还提供了不少其余有用的属性，你们开发的时候根据须要来设置属性的值。能够发现，对于中大型项目来讲，使用Stack Navigation进行路由管理时代码层次是很是清晰的，也有助于项目的后期扩展。

除了Stack Navigation外，另外一个经常使用的功能是Tab Navigation。Tab Navigation主要用在底部Tab导航开发中，使用前须要先安装bottom-tabs插件，安装的命令以下。

npm install @react-navigation/bottom-tabs

建立Tab Navigation须要用到createBottomTabNavigator()函数，它包含两个属性，即导航器和路由，分别对应Tab.Navigator和Tab.Screen两个组件，最后再使用NavigationContainer组件包裹它们，以下所示。

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

const Tab = createBottomTabNavigator();

const MainPage = () => {
    return (<NavigationContainer>
            <Tab.Navigator
                screenOptions={({route}) => ({
                    tabBarIcon: ({focused,size}) => {
                        let sourceImg;
                        if (route.name === 'Home') {
                            sourceImg = focused
                            ? require('./images/tab_home_p.png')
                            : require('./images/tab_home_n.png');
                        } else if (route.name === 'Me') {
                            sourceImg = focused
                            ? require('./images/tab_me_p.png')
                            :require('./images/tab_me_n.png');                  }
                        return <Image source={sourceImg}/>;
                    },
                })}
                tabBarOptions={{
                    activeTintColor: 'green',
                    inactiveTintColor: 'gray',
                }}>
                <Tab.Screen name="Home" component={HomeScreen}/>
                <Tab.Screen name="Me" component={MeScreen}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
};

export default MainPage;

function HomeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{fontSize:28 }}>Home Page</Text>
        </View>
    );
}

function MeScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{fontSize:28 }}>Me Page</Text>
        </View>
    );
}

同时，Tab.Navigator和Tab.Screen都提供了不少不错的属性，开发者能够根据开发须要来设置属性值。运行上面的代码，效果以下图所示。