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

【问题标题】：How to catch params with React Navigation 5?如何使用 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 是第一次显示吗？因为它可能会发生以前打开过，现在再次打开时，它只显示以前渲染的部分，当时可能还没有卸载

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

【解决方案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>
  );
}

【讨论】：