[英]couldn't find a navigation object error in react native
It's my first time using react native and I want to move to another screen (slide2), I have an error which reads "We couldn't find a navigation object. Is your component inside a navigator?"这是我第一次使用本机反应,我想移动到另一个屏幕(幻灯片 2),我有一个错误,上面写着“我们找不到导航 object。你的组件在导航器中吗?” they said the error is in slide one 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 page code 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;
this is my index.js where the routing is这是我的 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 code 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;
The problem is in your index.js where you use the register the SlideOne component which is not required.问题出在您的 index.js 中,您在其中注册了不需要的 SlideOne 组件。 You should register the App component like below.
您应该像下面这样注册 App 组件。
AppRegistry.registerComponent(appName, () => App);
Now the error is on your component which is SlideOne not being inside the Navigator which is true.现在错误出现在您的组件上,即 SlideOne 不在导航器内,这是真的。 When you run the app you skip the App and directly render the SlideOne component which is not connected to any navigator so when you try to navigate you end up in the error.
当您运行该应用程序时,您会跳过该应用程序并直接渲染未连接到任何导航器的 SlideOne 组件,因此当您尝试导航时,您最终会遇到错误。
When you use your App component you render the SlideOne component which is inside a navigator so it will work as expected.当您使用您的 App 组件时,您会渲染位于导航器内的 SlideOne 组件,以便它可以按预期工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.