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

【问题标题】：React native switch screen one component to another on button press按下按钮时将本机切换屏幕一个组件反应到另一个组件
【发布时间】：2020-04-02 14:10:07
【问题描述】：

我是 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>
    )
}

【问题讨论】：

标签： android reactjs react-native expo native

【解决方案1】：

在 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 中

去掉<div>标签作为回报，react-native 不支持 div 标签

希望这会有所帮助！

【讨论】：