这是我第一次使用react native,我想移到另一个屏幕(slide2),出现一个错误,上面写着“我们找不到导航对象。您的组件在导航器中吗?”他们说错误出在幻灯片1中,我有点卡住了,这就是我走了多远。也请您多说明一点,并向我展示要添加的内容和位置,谢谢。
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;
问题出在您的index.js中,您在其中注册了不需要的SlideOne组件。您应按如下所示注册App组件。
AppRegistry.registerComponent(appName, () => App);
现在错误出现在您的组件上,即SlideOne不在导航器内部,这是事实。当您运行该应用程序时,您将跳过该应用程序,并直接呈现未连接到任何导航器的SlideOne组件,因此当您尝试导航时,最终会出现错误。
当您使用App组件时,将呈现在导航器内部的SlideOne组件,以便它可以按预期工作。