如何在反应本机中导航

Question

这是我第一次使用 react native，我想移动到另一个屏幕(slide2(，我遇到了错误，我有点卡住了，这就是我已经走了多远。

还请解释一下将不胜感激，谢谢

幻灯片一页代码

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import SlideTwo from './SlideTwo';
import React from 'react';

const SlideOne: () => React$Node = () => {
return (
<>
<View style={styles.body}>
<View style={styles.wrapper}>
<View style={styles.imageWrap}></View>
<TextInput
placeholder="What should we refer to you as?"
placeholderTextColor="#03444F60"
style={styles.textInput}
underlineColorAndroid="transparent"
/>
</View>
<View style={styles.label}>
<Text style={styles.labelText}>First Name</Text>
</View>
<View style={styles.textWrap}>
<Text style={styles.text}>Back</Text>
<Text style={styles.text}>Next</Text>
</View>
<Button
title="Go to screen two"
onPress={() => this.props.navigation.navigate('SlideTwo')}
/>
</View>
</>
);
};
const styles = StyleSheet.create({
body: {
backgroundColor: '#FFC7B9',
flex: 1,
justifyContent: 'center',
},
backgroundColor: 'rgba(255, 255, 255, 0.2)',
borderRadius: 13,
},

这是我的索引.js路由在哪里

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {AppRegistry} from 'react-native';
import App from './App';
import SlideOne from './SlideOne';
import SlideTwo from './SlideTwo';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => SlideOne);

Answer 1

您应该从创建一个堆栈导航器开始(我只会创建一个用于导航的文件，它可能会变得非常复杂和冗长(：

import {createStackNavigator} from '@react-navigation/stack';    
import SlideOne from './SlideOne';
import SlideTwo from './SlideTwo';
// NAVIGATION
const StackNavigator = createStackNavigator({
SlideOne: SlideOne,
SlideTwo: SlideTwo,
})
export default createAppContainer(StackNavigator);

现在您只需将此文件导入您的应用程序.js，例如：

import Navigator from './navigation/Navigator'
const App = () => {
return (
<React.Fragment>
<Navigator />
{//... your code here}
</React.Fragment>
(
}

现在，您可以使用this.props.navigation.naving调用代码中的任何导航。