使用RN控制页面路由

1 安装依赖

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

2 链接和配置

IOS

npx pod-install ios

Android 

android/app/src/main/java/<your package name>/MainActivity.java

//引入包名
import android.os.Bundle;
//添加类
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

 3 使用路由

npm install @react-navigation/native-stack

index.js

 

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './App';
import React from 'react';
import {name as appName} from './app.json';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {NavigationContainer} from '@react-navigation/native';
import MyList from './src/pages/index1'
const AppRoot = () => {
  const Stack = createNativeStackNavigator();

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="App">
        <Stack.Screen name="App" component={App} />
        <Stack.Screen name="MyList" component={MyList} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
AppRegistry.registerComponent(appName, () => AppRoot);

• <Stack.Navigator> 组件 initialRouteName 属性是一定要填写，不然会报错，因为不知道显示哪一个路由
• <Stack.Screen> 组件 name 和 component 属性必填的，一个路由的名称，一个路由展示的界面

import {StyleSheet, Text, View} from 'react-native';
import React from 'react';
// import Icon from 'react-native-vector-icons/FontAwesome';
const App = ({navigation}) => {
  const goindex=()=>{
    navigation.navigate("MyList")
  }
  return (
    <View>
      {/* <Icon name="rocket" size={30} color="#900" /> */}
      <Text onPress={goindex}>测试</Text>
    </View>
  );
};

export default App;

const styles = StyleSheet.create({});

作者：爱吃豆包
链接：https://www.jianshu.com/p/6331d60749fe
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。