【问题标题】:Why do I get "action navigate with payload undefined was not handled by any navigator"?为什么我会得到“任何导航器都未处理未定义有效负载的操作导航”?
【发布时间】:2021-07-23 20:49:47
【问题描述】:

我正在尝试自己做一个小项目来了解 React-Native。

我有 2 个屏幕,我想通过按下按钮从 SplashScreen 导航到 HomeScreen。但这给了我一个错误。 我应该添加什么来消除错误?

这里是代码 应用.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;

SplashScreen.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;

【问题讨论】:

    标签: reactjs react-native react-navigation react-navigation-v5


    【解决方案1】:

    你在这里定义路线&lt;Stack.Screen name="Home" component={HomeScreen} /&gt;

    路由名称是"Home" 和路由组件HomeScreen

    导航呼叫navigation.navigate(route name not route component)

    所以用navigation.navigate("Home")替换这个navigation.navigate(HomeScreen)

    【讨论】:

    • 顺便说一句,你会推荐我在哪里学习 react-native?官方文档是最好的起点?
    • 官方文档只提供了组件、道具、状态等基础知识,所以它有利于基础知识,但你不能只用它来创建应用程序。您强烈需要第三方库,例如导航,ui库,相机,位置,通知,日期选择器等原生API,并且每个库都有小文档,您需要先仔细阅读并在谷歌搜索有关的文章每个图书馆都以最佳方式使用
    • 对于导航,reactnavigation 的文档很好理解并且有很多例子reactnavigation.org/docs/getting-started
    • 不客气,好的。对于导航库,您需要只读部分,因为它里面有很多包,如果您在应用程序中使用堆栈导航,则此时无需阅读底部选项卡导航,但是在阅读堆栈导航文档时,请仔细阅读整个内容并知道提供的大多数解决方案。这很好地帮助您学习。
    • 使用 react native cli 比 expo 好。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2022-11-23
    • 2021-12-02
    • 2020-11-27
    • 1970-01-01
    • 1970-01-01
    • 2020-08-17
    • 1970-01-01
    相关资源
    最近更新 更多