react-navigation 5.x安装的坑

官方网站

首先安装

npm install @react-navigation/native

第二步

The libraries we will install now arereact-native-gesture-handler, react-native-reanimated, react-native-screens and react-native-safe-area-context. 如果之前没有安装过这些包，就请安装：

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

第三步

From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link. 从react 0.60及更高的版本开始，react-native link已经自动化，就是给你配置好了，不需要手动配置了

如果你是Mac而且开发环境是IOS系统的话，你还得需要手动配置，你需要installpods去完成这个链接绑定，如果安装过Cocoapods，然后执行命令

cd ios; pod install;

第四步

对于安卓来说react-native-screens的完成安装的配置，还需要在android/app/build.gradle的dependencies部分添加两行代码：

implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'

第五步

需要在你配置路由的文件引入react-native-gesture-handler，记住一定是顶部

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

第六步

开始进行路由的配置，首先安装一下比较常见的导航器createStackNavigator，这个东西是依赖于@react-native-community/masked-view，在第二步已经安装了

npm install @react-navigation/stack

直接贴上官网的代码

//router.js
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

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

const Stack = createStackNavigator();

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

export default App;

//index.js
import {AppRegistry} from 'react-native';
import App from './router';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

最大的坑

如果你遇见一个问题，比如

白屏
报错(object is null)

并且调试了很久没有结果时，重新安装一下app包，亲测，都是泪啊 T T

顺便我这个react小白吐槽一下，这个react-navigation就不能改动小点吗，一个版本，一个写法，我也是服了。我安装的4.x版本的，我看着5.x的版本调了起来，感觉自己的智商被秀了。。，我还调了2个小时左右

【此处有个伤心的表情包...】

最后补充一下

建议4.x版本使用，5.x可以学习试试(太tm坑了，正式使用，你会崩溃的，反正我选择狗带-.-)