reactjs - 为什么我会得到“未定义有效负载的操作导航未被任何导航器处理”?
问题描述
我正在尝试自己做一个小项目来了解 React-Native。
我有 2 个屏幕,我想通过按下按钮从 SplashScreen 导航到 HomeScreen。但这给了我一个错误。我应该添加什么来摆脱错误?
这是代码 App.js
import 'react-native-gesture-handler'; // react-navigation, must be on top
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import SplashScreen from "./src/screens/SplashScreen.js";
import HomeScreen from "./src/screens/HomeScreen.js";
const Stack = createStackNavigator();
const App = () => {
return (
// name is whatever you write
// initialRouteName is which screen you want as your initial
// when I add title, it will write it as title, not whats written in "name"
<NavigationContainer>
<Stack.Navigator initialRouteName="Intro" screenOptions={{title:"helllloo"}}>
<Stack.Screen name="Intro" component={SplashScreen} options={{title:"our intro"}} />
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
HomeScreen.js
import React from "react";
import { View, Text } from "react-native";
const HomeScreen = () => {
return(
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
)
}
export default HomeScreen;
闪屏.js
import React from "react";
import { Text, View, Button } from "react-native";
import HomeScreen from "./HomeScreen";
const SplashScreen = ({ navigation }) => {
// without flex:1, it will center on that row, not on whole page
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Hello</Text>
<Button
title="Go to HomeScreen"
onPress = {() => navigation.navigate(HomeScreen)}
/>
</View>
)
}
export default SplashScreen;
解决方案
你在这里定义路线<Stack.Screen name="Home" component={HomeScreen} />
路由名称是"Home"
和路由组件HomeScreen
导航呼叫navigation.navigate(route name not route component)
所以将其替换navigation.navigate(HomeScreen)
为navigation.navigate("Home")
推荐阅读
- mysql - 如何设计表SQL表来存储范围及其对应的折扣值
- angular - 无法为“服务”目标确定单个项目
- c++ - 找不到 LMDB(缺少:LMDB_INCLUDE_DIR LMDB_LIBRARIES)
- excel - 使用宏将公式粘贴到一系列单元格中
- c# - IBM MQ Windows 客户端 C# 连接到服务器失败并出现 2298 错误
- php - PHP strtotime 获取给定年份的最后一天
- c# - 我使用了太多的 if 语句
- javascript - chart.js 数据通过 API 根据选择动态形成
- mysql - 这种情况下怎么写SQL?
- python - 日期范围内的 xlsxwriter