在按下按钮时将本机切换屏幕的一个组件反应到另一个组件

React native switch screen one component to another on button press

我是 React Native 的新手,正在制作一个基本的应用程序,在每个国家/地区都找不到电晕病例 所以我在单独的文件中制作了 2 个组件。如何从子组件切换到子组件? 现在我想在使用堆栈导航器单击按钮时在它们之间切换

App.js

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Splash from './scenes/splash';
import Corona from './scenes/corona';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Splash">
        <Stack.Screen name="Splash" component={Splash} />
        <Stack.Screen name="Corona" component={Corona} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

splash.js

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

export default function splash({navigation}) {
    return (
            <View style={styles.container}>
                <Image 
                source={require('../assets/corona.jpg')} 
                resizeMode="cover" style={styles.img} />
                <Text style={styles.txt}>
                    Track the current status {"\n"} 
                    of the COVID-19 and{"\n"}
                    stay up to date.</Text>
                <Text 
                style={styles.btn}
                onPress={() => this.props.navigation.navigate('Corona')}
                >Continue</Text>
            </View>
    )
}      

corona.js(导航到这里)

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

export default function corona({navigation}) {
    return (
        <div>
            <View>
                <Text>Hello next screen</Text>
            </View>
        </div>
    )
}

在splash.js

改变

 <Text style={styles.btn}
  onPress={() => this.props.navigation.navigate('Corona')}>Continue</Text>

   <Text style={styles.btn}
  onPress={() => navigation.navigate('Corona')}>Continue</Text>

并在 corona.js

删除return中的<div>个标签,react-native不支持div个标签

希望对您有所帮助!