react-native 路由react-navigation6.0x

最近刚开始学习rn 不足之处还请指出

官网地址react-navigation

最低要求

• react-native>= 0.63.0
• expo>= 41（如果您使用expo)
• typescript>= 4.1.0（如果使用 TypeScript)

安装依赖

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context react-native-gesture-handler

如果想实现底部导航栏还需要安装

npm install @react-navigation/bottom-tabs

底部导航栏

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={
   
   { flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={
   
   { flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

如果报错了 ， 建议重启项目。。。