如何解决本机Navigation.navigate错误 [英] How do I solve react native navigation.navigate error

问题描述

这是我第一次使用react native，我想移到另一个屏幕(slide2)，出现一个错误，上面写着未定义不是对象(正在评估Navigation.navigate)".我走了. 还请您多说明一点，并向我展示要添加的内容以及谢谢的地方

It's my first time using react native and I want to move to another screen (slide2), I have an error which reads "Undefined is not an object (evaluating navigation.navigate)" I am kind of stuck, this is how far I have gone. Please also explaining a bit will be very much appreciated and showing me what to add and where, thank you

slideOne.js页面代码

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

import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TextInput,
  Button,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

function SlideOne({navigation}) {
  return (
    <React.Fragment>
      <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={() => navigation.navigate('SlideTwo')}
        />
      </View>
    </React.Fragment>
  );
}
export default SlideOne;

这是我的index.js所在的路由

this is my index.js where the routing is

    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);

app.js代码

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

import SlideOne from './SlideOne';
import SlideTwo from './SlideTwo';

// NAVIGATION
const StackNavigator = createStackNavigator();

function App() {
  <NavigationContainer>
    <StackNavigator.Navigator>
      <StackNavigator.Screen name="SlideOne" component={SlideOne} />
      <StackNavigator.Screen name="SlideTwo" component={SlideTwo} />
    </StackNavigator.Navigator>
  </NavigationContainer>;
}

export default App;

推荐答案

您的 index.js 文件不正确，只需将 index.js 文件替换为此

Your index.js file is incorrect just replace index.js file with this

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 {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);

您应该将 App 注册为AppRegistry组件，而不是在注册 SlideOne

you should register App as AppRegistry component instead you are registering SlideOne

这篇关于如何解决本机Navigation.navigate错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！