在目前最新rn版本v0.67.2下,在设置react-navigation时,可以直接安装以下依赖:
yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/material-top-tabs react-native-tab-view @react-navigation/bottom-tabs @react-navigation/stack @react-navigation/native
在项目入口文件App.js中:
//项目入口文件
//2021/9/20
//created by GM
import React from 'react';
import Nav from './src/Nav';export default function App() {return <Nav></Nav>;
}
然后在自创建文件夹src下的Nav.js中设置路由:
//页面路由
//2021/9/20
//created by GM
import React from 'react';
import MainPage from './pages/MainPage';
import PingPage from './pages/PingPage';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';const Stack = createStackNavigator();export default function Nav() {return (<NavigationContainer><Stack.Navigator><Stack.Screen name="MainPage" component={MainPage} /><Stack.Screen name="PingPage" component={PingPage} /></Stack.Navigator></NavigationContainer>);
}
但是在最新版本中会出现这种报错:
Attempt to invoke interface method boolean com.swmansion.reanimated.layoutReanimation.NativeMethodsHolder.isLayoutAnimationEnabled() on a null object reference
这种时候,只需要在MainApplication中添加:
import com.facebook.react.bridge.JSIModulePackage; // <- 添加
import com.swmansion.reanimated.ReanimatedJSIModulePackage; // <- 添加
然后在
@Overrideprotected String getJSMainModuleName() {return "index";}
之后,添加代码:
@Overrideprotected JSIModulePackage getJSIModulePackage() {return new ReanimatedJSIModulePackage();}
这时候再run就可以正常使用路由了。。。