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

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',
  },
});

标签：react,Detail,React,StyleSheet,跳转,import,Home,navigation,Native
来源： https://www.cnblogs.com/sunyan97/p/14817591.html