在按下按钮时将本机切换屏幕的一个组件反应到另一个组件
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个标签
希望对您有所帮助!
我是 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个标签
希望对您有所帮助!