https://reactnavigation.org/docs/zh-Hans/getting-started.html
首先 安装两个插件
yarn add react-navigation-stack
yarn add react-navigation
这段代码覆盖App.js
import React from 'react';
import { View, Text } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
class HomeScreen extends React.Component {
render() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator(
{
Home: {
screen: HomeScreen,
},
},
{
initialRouteName:"Home"
}
);
export default createAppContainer(AppNavigator);
然后再安装其他的插件 进行配置
yarn add react-native-reanimated react-native-gesture-handler react-native-screens
首先要进官网看 然后看自己的react-nactive是什么版本
为了完成 react-native-screens
在 Android 上的安装, 请在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
在 Android 上的安装,请在 MainActivity.java
中做如下修改:
package com.reactnavigation.example;
import com.facebook.react.ReactActivity;
+ import com.facebook.react.ReactActivityDelegate; //增加这三行
+ import com.facebook.react.ReactRootView;
+ import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;
public class MainActivity extends ReactActivity {
@Override
protected String getMainComponentName() {
return "Example";
}
+ @Override //增加这些
+ protected ReactActivityDelegate createReactActivityDelegate() {
+ return new ReactActivityDelegate(this, getMainComponentName()) {
+ @Override
+ protected ReactRootView createRootView() {
+ return new RNGestureHandlerEnabledRootView(MainActivity.this);
+ }
+ };
+ }
} //增加完后去掉加号
最后在index.js中加入这行
import 'react-native-gesture-handler'
关掉模拟器 重新连接 重新启动