App.js:
1 import React from ‘react‘ 2 import { StyleSheet, Text, View } from ‘react-native‘ 3 import {NavigationContainer} from ‘@react-navigation/native‘ 4 import {createStackNavigator} from ‘@react-navigation/stack‘ 5 6 import Home from ‘./pages/Home‘ 7 import Detail from ‘./pages/Detail‘ 8 9 const Stack = createStackNavigator(); 10 11 export default function App() { 12 return ( 13 <NavigationContainer> 14 <Stack.Navigator> 15 <Stack.Screen name="Home" component={Home} headerMode=‘none‘></Stack.Screen> 16 <Stack.Screen name="Detail" component={Detail} headerMode=‘none‘></Stack.Screen> 17 </Stack.Navigator> 18 </NavigationContainer> 19 ) 20 } 21 22 const styles = StyleSheet.create({})
Home.js:
1 import React from ‘react‘; 2 import {StyleSheet, Text, View, Button} from ‘react-native‘; 3 4 export default function Home({navigation}) { 5 return ( 6 <View> 7 <Text style={styles.Title}>Home</Text> 8 <View style={styles.Btn}> 9 <Button 10 title="点击到Detail页面" 11 onPress={() => { 12 navigation.push(‘Detail‘,{name:‘孙焱‘}); 13 }}></Button> 14 </View> 15 </View> 16 ); 17 } 18 19 const styles = StyleSheet.create({ 20 Btn: { 21 marginTop: 20, 22 width: 300, 23 height: 40, 24 left: ‘10%‘, 25 }, 26 Title: { 27 color: ‘red‘, 28 fontSize: 28, 29 textAlign: ‘center‘, 30 }, 31 });
Detail.js:
1 import React from ‘react‘; 2 import {StyleSheet, Text, View,Button} from ‘react-native‘; 3 4 export default function Detail({route,navigation}) { 5 const {name} = route.params; 6 return ( 7 <View> 8 <Text>{name}</Text> 9 <Text style={styles.Title}>Detail</Text> 10 <View style={styles.Btn}> 11 <Button 12 title="点击到Home页面" 13 onPress={() => { 14 navigation.navigate(‘Home‘); 15 }}></Button> 16 </View> 17 </View> 18 ); 19 } 20 21 const styles = StyleSheet.create({ 22 Btn: { 23 marginTop: 20, 24 width: 300, 25 height: 40, 26 left: ‘10%‘, 27 }, 28 Title: { 29 color: ‘red‘, 30 fontSize: 28, 31 textAlign: ‘center‘, 32 }, 33 });
原文：https://www.cnblogs.com/sunyan97/p/14817591.html
