最近刚开始学习rn 不足之处还请指出
官网地址react-navigation
最低要求
react-native
>= 0.63.0expo
>= 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>
);
}