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坑了，正式使用，你會崩潰的，反正我選擇狗帶-.-)