在目前最新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; // <- 添加
然后在
@Override
protected String getJSMainModuleName() {
return "index";
}
之后,添加代码:
@Override
protected JSIModulePackage getJSIModulePackage() {
return new ReanimatedJSIModulePackage();
}
这时候再run就可以正常使用路由了。。。