React-native学习-18---React Navigation导航器跳转页面

Z时代
2024-01-10
分类：综合

react

几天没写了，解决项目中的小bug。今天主要贴出来：React Navigation导航器跳转页面，供自己和他人参考，

官网具体有详细说明，因为版本常更新：今天是20200905

https://reactnavigation.org/

1.在项目中增加依赖：
npm install @react-navigation/native //React Native项目中所需的软件包
npm install @react-navigation/stack //安装堆栈导航器库
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

app.js代码：

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<View style={{backgroundColor:'green',height:20}}/>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
<View style={{backgroundColor:'green',height:20}}/>
<Button
title="Go to First"
onPress={() => navigation.navigate('First')}
/>
</View>
);
}
function FirstScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>First Screen</Text>
</View>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>First Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="First" component={FirstScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;