Javascript 不能';在react native中找不到导航对象错误
这是我第一次使用react native,我想移动到另一个屏幕(幻灯片2),我有一个错误,上面写着“我们找不到导航对象。你的组件在导航器中吗?”他们说错误在幻灯片1中,我有点卡住了,这就是我已经走了多远。 也请解释一点将非常感谢,并告诉我要添加什么和在哪里,谢谢 slideOne.js页面代码Javascript 不能';在react native中找不到导航对象错误,javascript,react-native,mobile,navigation,react-native-navigation,Javascript,React Native,Mobile,Navigation,React Native Navigation,这是我第一次使用react native,我想移动到另一个屏幕(幻灯片2),我有一个错误,上面写着“我们找不到导航对象。你的组件在导航器中吗?”他们说错误在幻灯片1中,我有点卡住了,这就是我已经走了多远。 也请解释一点将非常感谢,并告诉我要添加什么和在哪里,谢谢 slideOne.js页面代码 import 'react-native-gesture-handler'; import {NavigationContainer} from '@react-navigation/native'; i
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;
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;
app.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;
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;
从“React”导入React;
从'@react navigation/stack'导入{createStackNavigator};
从'@react-navigation/native'导入{NavigationContainer};
从“/SlideOne”导入SlideOne;
从“/slidewo”导入slidewo;
//航行
const StackNavigator=createStackNavigator();
函数App(){
;
}
导出默认应用程序;
问题出在index.js中,您使用的是注册SlideOne组件,这不是必需的。您应该像下面那样注册应用程序组件
AppRegistry.registerComponent(appName, () => App);
现在错误出现在您的组件上,而SlideOne不在导航器中,这是真的。当您运行应用程序时,您会跳过该应用程序并直接呈现未连接到任何导航器的SlideOne组件,因此当您尝试导航时,最终会出现错误
当你使用你的应用程序组件时,你会呈现一个导航器中的SlideOne组件,这样它就可以正常工作了