如何使用 React Navigation 5 捕获参数？

Posted 2023-02-22

【中文标题】如何使用 React Navigation 5 捕获参数？

【英文标题】：How to catch params with React Navigation 5?

【发布时间】：2020-10-20 16:49:23

【问题描述】：

更新：我确实解决了这个问题，您可以在发布后不久在我的 cmets 中看到。我会保持这个状态，以防它帮助其他人，或者如果有人有更好的方法或方法。

我的目标是将参数传递给下一个屏幕。我将展示在没有 React Navigation 5 的情况下我是如何做到的，这样你就可以看到我的目标：

我有一个来自一个屏幕的按钮，如下所示：

<Button
    title="View Card"
    onPress=() => this.props.navigation.navigate("CardDetail", cardId: 1)
/>

这将我带到另一个屏幕 CardDetail：

我出示cardId：

class CardDetail extends Component 
    render() 
        return(
            <View>
                <Text>this.props.route.params.cardId</Text>
                <Text>Card Detail </Text>
            </View>
        );
    

现在，我已经实现了 React Navigation，但找不到捕获参数的方法。这是我所拥有的：

function Overview(props) 
    return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
        <Text>Overview</Text>
        <Text>prop</Text> // this doesn't work
    </View>
  );


const Tab = createBottomTabNavigator();

class CardDetail extends Component 
    render() 
        return(
             <Tab.Navigator>
                 <Tab.Screen name="Overview" component=Overview />
             </Tab.Navigator>
        );
    

我尝试了几种方法：这里是一个

function Overview(props) 
    const cardId = React.useState(this.props.route.params.cardId);
    return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
        <Text>Overview</Text>
        <Text>cardId</Text>
    </View>
  );

尝试添加：

<Tab.Screen name="Overview" component=Overview options= title: this.props.route.params.cardId  />

这个错误：label is not a function

试过这种方法：这似乎是最有前途的 https://reactnavigation.org/docs/hello-react-navigation/ 功能概述（道具） 常量 cardId = this.props.route.params.cardId; console.log("sadf", props); 返回 （ 概述 cardId );

            <Tab.Screen name="Overview">
                props => <Overview ...this.props  />
            </Tab.Screen>

这看起来很有希望，但我找不到真正将它传递给概览的方法。

我尝试过通过 const Tab = createBottomTabNavigator(props); 几种方式传递道具。要么什么都没发生，要么告诉我我的方法在 RN5 中不被接受

我是否正确地尝试了这个？

我已经阅读了 RN5 的文档并尝试了很多方法来传递参数

https://reactnavigation.org/docs/custom-navigators/

【问题讨论】：

我能够得到传递的道具：props => <Overview ...this.props />，而不是使用const Overview = props => 的函数

保留这个问题，以防它帮助他人或有人有更有效的方法

您的组件 OverView 是第一次显示吗？因为它可能会发生以前打开过，现在再次打开时，它只显示以前渲染的部分，当时可能还没有卸载

【参考方案1】：

就这么简单 第一：当你传递参数 CardDetail(Now is tabbar) 这意味着你的参数是 CardDetail 的道具

const Tab = createBottomTabNavigator();

class CardDetail extends Component 
    const cardId = this.props.route.params.cardId
    render() 
        return(
             <Tab.Navigator>
                 // ==> and pass cardId into Overview as props
                 <Tab.Screen name="Overview" component=() => <Overview cardId=cardId/> />
             </Tab.Navigator>
        );
    

在 Overview 组件中只需使用 cardId 就可以了

function Overview(props) 
    const cardId = props;
    return (
    <View style= flex: 1, justifyContent: 'center', alignItems: 'center' >
        <Text>Overview</Text>
        <Text>cardId</Text>
    </View>
  );