react-navigation 5.x安装的坑

官方网站

reactnavigation.org/docs/zh-Han…

首先安装

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坑了，正式使用，你会崩溃的，反正我选择狗带-.-)