React-Native不同屏幕之间基本路由跳转

Posted 2021-05-27 孙焱

App.js：

import React from \'react\'
import { StyleSheet, Text, View } from \'react-native\'
import {NavigationContainer} from \'@react-navigation/native\'
import {createStackNavigator} from \'@react-navigation/stack\'

import Home from \'./pages/Home\'
import Detail from \'./pages/Detail\'

const Stack = createStackNavigator();

export default function App() {
  return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen name="Home" component={Home} options={{title:\'这是Home页面\'}}></Stack.Screen>
       <Stack.Screen name="Detail" component={Detail} options={{title:\'这是Detail页面\'}}></Stack.Screen>
     </Stack.Navigator>
   </NavigationContainer>
  )
}

const styles = StyleSheet.create({})


Home.js:

import React from \'react\'
import { StyleSheet, Text, View,Button} from \'react-native\'

export default function Home({navigation}) {
  return (
    <View>
      <Text style={styles.Title}>Home</Text>
     <View style={styles.Btn}>
     <Button  title="点击到Detail页面" onPress={()=>{navigation.navigate(\'Detail\')}}></Button>
     </View>
    </View>
  )
}

const styles = StyleSheet.create({
  Btn:{
    marginTop:20,
    width:300,
    height:40,
    left:"10%"
  },
  Title:{
    color:\'red\',
    fontSize:28,
    textAlign:\'center\'
  }
})

Detail.js:

import React from \'react\';
import {StyleSheet, Text, View,Button} from \'react-native\';

export default function Detail({navigation}) {
  return (
    <View>
      <Text style={styles.Title}>Detail</Text>
      <View style={styles.Btn}>
        <Button
          title="点击到Home页面"
          onPress={() => {
            navigation.navigate(\'Home\');
          }}></Button>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  Btn: {
    marginTop: 20,
    width: 300,
    height: 40,
    left: \'10%\',
  },
  Title: {
    color: \'red\',
    fontSize: 28,
    textAlign: \'center\',
  },
});