React Native typescript ，将变量传递到另一个屏幕

8gsdolmq 于 2023-01-14 发布在 React

关注(0)|答案(3)|浏览(124)

我似乎不知道如何在react native中使用typescript传递变量，我尝试过参数，但它说undefined不是对象（评估“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>

react-native

来源：https://stackoverflow.com/questions/71721239/react-native-typescript-pass-variable-to-another-screen

3条答案

按热度按时间

c86crjj01#

对于我来说，其他答案在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 {
    ...
}

赞(0）回复(0）举报 2023-01-14

fivyi3re2#

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

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

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

请注意，您可以从navigator堆栈传递导航和路径属性，这样就不需要使用钩子了：
https://reactnavigation.org/docs/params/
https://reactnavigation.org/docs/use-route

赞(0）回复(0）举报 2023-01-14

0yg35tkg3#

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

const NewsDetails = ({route}) => {

   const value = route.params.value

   return (...)
}

赞(0）回复(0）举报 2023-01-14

我来回答

React Native typescript ，将变量传递到另一个屏幕

3条答案

相关问题

热门标签

最新问答