[英]How do I solve react native navigation.navigate error
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.这是我第一次使用本机反应,我想移动到另一个屏幕(slide2),我有一个错误,上面写着“Undefined is not an object (evaluating navigation.navigate)”我有点卡住了,这就是我有多远走了。 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 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;
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;
Your index.js file is incorrect just replace index.js file with this你的index.js文件不正确只是用这个替换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 {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
you should register App as AppRegistry component instead you are registering SlideOne您应该将App注册为 AppRegistry 组件,而不是注册SlideOne
You didn't init your "navigation" const.你没有初始化你的“导航”常量。 try this: - Import useNavigation from @react-navigation/native
试试这个:- 从 @react-navigation/native 导入 useNavigation
import { useNavigation } from '@react-navigation/native';
And init your navigation const like this并像这样初始化你的导航常量
const navigation = useNavigation(); const navigation = useNavigation();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.