React Native Typescript，将变量传递到另一个屏幕答案

【问题标题】：React Native Typescript, pass variable to another screenReact Native Typescript，将变量传递到另一个屏幕
【发布时间】：2023-01-10 15:47:14
【问题描述】：

我似乎无法弄清楚如何在本机反应中使用打字稿传递变量，我已经尝试过参数但它说未定义不是一个对象（评估'navigation.props.value'）。

下面是代码。

import {useNavigation} from '@react-navigation/core';
const navigation = useNavigation();

.......

<TouchableOpacity onPress={() => navigation.navigate('NewsDetails', {value: 'hi', })}>
                  <Block row flex={0} align="center">
                    <Text
                      p
                      color={colors.link}
                      semibold
                      size={sizes.linkSize}
                      marginRight={sizes.s}>
                      Read Article
                    </Text>
                    <Image source={assets.arrow} color={colors.link} />
                  </Block>
                </TouchableOpacity>

然后在屏幕上显示它，这就是我所做的，但它不起作用

<Text p marginBottom={sizes.s}>
               {navigation.props.value}
</Text>

【问题讨论】：

我觉得应该是route.params.value。 reactnavigation.org/docs/params

标签： javascript reactjs typescript react-native expo

【解决方案1】：

将导航传递变量反应为参数，不是道具.您可以使用钩子传递它，但是您需要使用 useRoute 钩子在下一个屏幕中获取路由，然后将其作为 route.params.value

const nextScreen = () => {
  const route = useRoute()

  return <Text>route.params.value</Text>
}

请注意，您可以从导航器堆栈传递导航和路由道具，然后您不需要使用钩子：

https://reactnavigation.org/docs/params/

https://reactnavigation.org/docs/use-route

【讨论】：

嗨，它说找不到变量：useRoute
没关系，找到了，现在可以用了....谢谢
如果它是正确的，你能把它标记为正确答案吗？

【解决方案2】：

由于 NewsDetails 是一个可以导航到的屏幕，它由导航器处理，因此 route 和 navigation 属性由导航器传递到该屏幕。您可以直接从屏幕道具在 NewsDetails 组件中访问它，如下所示。

const NewsDetails = ({route}) => {

   const value = route.params.value

   return (...)
}

【讨论】：

【解决方案3】：

对我来说，其他答案在 TypeScript 中不起作用，因为 route.params.value 中没有 value。但是，对我有用的获取数据的解决方案是调用 valueOf 方法，如下所示：

const route = useRoute();
if(route.params != undefined){
    const data = route.params.valueOf() as DataType; // insert fitting datatype for the object you give the navigate method
    return (...);
}
else {
    ...
}

【讨论】：