我如何在 React Native 中导航

Question

这是我第一次使用本机反应，我想移动到另一个屏幕 (slide2)，我遇到了错误，我有点卡住了，这就是我走了多远。

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

slide一页代码

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,
  },

这是我的 index.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);

现在您只需将此文件导入您的 App.js，例如：

import Navigator from './navigation/Navigator'

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

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