在本机反应中找不到导航对象错误答案

【问题标题】：couldn't find a navigation object error in react native在本机反应中找不到导航对象错误
【发布时间】：2020-05-16 17:12:51
【问题描述】：

这是我第一次使用本机反应，我想移动到另一个屏幕（幻灯片 2），我有一个错误，上面写着“我们找不到导航对象。你的组件在导航器中吗？”他们说错误在第一张幻灯片中，我有点卡住了，这就是我走了多远。也请解释一下将非常感谢，并告诉我要添加什么以及在哪里，谢谢。

slideOne.js 页面代码

import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import {useNavigation} from '@react-navigation/native';
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() {
const navigation = useNavigation();
  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 路由所在

    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;

【问题讨论】：

标签： javascript react-native mobile navigation react-native-navigation

【解决方案1】：

问题出在您的 index.js 中，您在其中注册了不需要的 SlideOne 组件。您应该像下面这样注册 App 组件。

AppRegistry.registerComponent(appName, () => App);

现在错误出现在您的组件上，即 SlideOne 不在导航器内，这是真的。当您运行该应用程序时，您会跳过该应用程序并直接渲染未连接到任何导航器的 SlideOne 组件，因此当您尝试导航时，您最终会遇到错误。

当您使用您的 App 组件时，您会渲染位于导航器内的 SlideOne 组件，以便它可以按预期工作。

【讨论】：