如何解决 react 本机屏幕打字稿中未定义的 route.params答案

【问题标题】：How to solve route.params undefined in react native screens typescript如何解决 react 本机屏幕打字稿中未定义的 route.params
【发布时间】：2021-07-27 01:03:43
【问题描述】：

我在下面有这个，我从 API 获取国家/地区名称，并使用 routes 在屏幕上显示它们。现在，我想将item.country 显示为headerTitle。但是，我收到了 route.params. 的 undefined 错误我该如何解决这个问题？

LocationDataScreen.tsx

function LocationDataScreen({ route, navigation }) {
  const { item } = navigation.state.params || {};  
  const countryName = item.country;
  return (
    <View style={styles.container}>
      <Text>{countryName}</Text>
      <Text>{item.cases}</Text>
    </View>
  );
}

ItemView.tsx

const ItemView = ({ item }) => {
    return (
      <RectButton
        onPress={() =>
          navigate("LocationDataScreen", { item: item, name: item.country })
        }
      >
        <Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

App.tsx

<AppStack.Navigator initialRouteName="SearchScreen">
  <AppStack.Screen name="SearchScreen" component={SearchScreen} />
  <AppStack.Screen
          name="LocationDataScreen"
          component={LocationDataScreen}
          options={({ route }) => ({
            headerLargeTitle: true,
            title: route.params.item,
          })}
        />

【问题讨论】：

标签： typescript react-native react-router navigation stack-navigator

【解决方案1】：

你应该像下面那样做

options={({route}) => ({
            headerLargeTitle: true,
            title: route.params.name,
          })}

你必须像下面这样传递名字

navigation.navigate("LocationDataScreen",{name:item.name});

确保您有如下设置以访问参数

import { createStackNavigator } from '@react-navigation/stack';

type RootStackParamList = {
  SearchScreen: undefined;
  LocationDataScreen: { name: string };
};

const AppStack = createStackNavigator<RootStackParamList>();

【讨论】：

我已经更新了我的代码，但是 route.params 仍然是undefined。路线是var route: Route<"LocationDataScreen", undefined>
你为什么要使用 navigation.state.params ？ doenst route.params 工作吗？
route.params 给出相同的undefined 错误。
你有没有通过 import { RouteProp } from '@react-navigation/native' 创建一个路由道具； ?
是的，但是我在 App.tsx 的什么地方使用它？

【解决方案2】：

问题只是您以错误的方式将参数传递给LocationDataScreen.tsx。

改用这个：

项目视图

const ItemView = ({ item }) => {
    return (
      <RectButton
        onPress={() =>
          navigate("LocationDataScreen", { ...item })
        }
      >
        <Text style={[styles.itemStyle, { textTransform: "capitalize" }]}>
          {item.id}
          {item.country.toUpperCase()}
        </Text>
      </RectButton>
    );
  };

LocationDataScreen.tsx

function LocationDataScreen({ route, navigation }) {
  const { country, cases } = route.params

  return (
    <View style={styles.container}>
      <Text>{country}</Text>
      <Text>{cases}</Text>
    </View>
  );
}

我在这里假设您的 item 在这一行 const ItemView = ({ item }) => { 看起来像这样。

item: {
   country: 'Italy',
   cases: 10
}

如果您可以添加您的 api 响应 here。添加后，请在 cmets 中告诉我。还可以在评论中分享相同的链接。

【讨论】：

API 回复就在这个问题中，您回复了：stackoverflow.com/questions/67322053/…。但是，我得到`未定义不是一个对象（评估'navigation.state.params'）
你能在 LocationDataScreen.tsx 的 return 语句上方添加这行“console.log('navigation check', navigation)”吗？让我知道打印了什么。如果您能在收到任何值时扩展“导航”对象，那就太好了。图像（SS）可以正常工作。 @dannym
更新：我做了一些研究，发现导航在函数中没有“状态”。 “this.props.navigation.state.params”仅在您使用“类”时才有效。但是，由于您使用的是函数，因此您必须在 LocationDetailScreen 中使用此 . const { country, cases } = route.params 。对于从 InputView 传递值，请使用： navigate("LocationDataScreen", { ...item }) } @dannym
这里也更新了解决方案(stackoverflow.com/questions/67322053/…)
感谢您提供此信息！以后一定要牢记这一点:)