关于ios:React-Navigation-5x版本实战指南

5次阅读

共计 4531 个字符，预计需要花费 12 分钟才能阅读完成。

如果你想理解 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 都提供了很多不错的属性，开发者能够依据开发须要来设置属性值。运行下面的代码，成果如下图所示。

正文完