React Native - 跨屏幕传递数据答案

【问题标题】：React Native - Passing Data Across ScreensReact Native - 跨屏幕传递数据
【发布时间】：2018-03-13 14:36:37
【问题描述】：

我在使用 react-native 应用时遇到了一些问题。我不知道如何跨屏幕传递数据。

我意识到在 SO 上还有其他类似的问题得到了解答，但是这些解决方案对我不起作用。

我正在使用StackNavigator。这是我在App.js 文件中的设置。

export default SimpleApp = StackNavigator({
    Home: { screen: HomeScreen },
    Categories: { screen: CategoriesScreen }, // send from here
    Category: { screen: CategoryScreen }      // to here
});

我有一个TouchableHighlight 组件，它有一个onPress 事件，可以导航到所需的屏幕。这是在我的Categories.js 文件/屏幕上。

<TouchableHighlight onPress={(id) => {
    const { navigate } = this.props.navigation;
    navigate('Category', { category: id });
}}>
    <Text>{name}</Text>
</TouchableHighlight>

当我点击元素时，屏幕确实切换到category，但是它无法发送props 数据。

因此，当我检查Category 屏幕中的数据时，它返回未定义。我尝试了以下方法：

this.props.category
this.props.navigation.state.category;
this.props.navigation.state.params.category

我如何才能访问我传入的数据 navigate 方法？

navigate('Category', { category: id });

编辑：这是我的实际代码结构：

data 来自 API。

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(id) => {
                        const { navigate } = this.props.navigation;
                        navigate('Category', { params: { category: id } });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}

【问题讨论】：

标签： javascript reactjs react-native stack-navigator

【解决方案1】：

使用以下代码 sn-p，您可以导航到具有某些值的另一个屏幕。

navigate({ Home: 'HomeScreen',  params: { username: 'abcd' } })

您可以使用 HomeScreen 收集参数，

this.props.navigation.state.params.username

【讨论】：

【解决方案2】：

因此，查看上述问题，我认为您正在寻找类似screenProps（记录在here）的内容。

这允许您跨屏幕传递特定的道具。

我希望这会有所帮助。如果您还有其他需要，请告诉我。

【讨论】：

【解决方案3】：

您的问题不是发送参数。您发送正确并正确阅读。您的错误与您的 id 未定义有关。

你应该像下面这样修复你的代码，

for (var i = 0; i < data.length; i++) {
    var name = data[i].name;
    var id = data[i].id;
    categoryComponents.push(
        <Card key={id}>
            <CardItem>
                <Body>
                    <TouchableHighlight onPress={(event) => {
                        // onPress event fires with an event object
                        const { navigate } = this.props.navigation;
                        navigate('Category', { category: id });
                    }}>
                        <Text>{name + " " + id}</Text>
                    </TouchableHighlight>
                </Body>
            </CardItem>
        </Card>
    );
}

你可以像下面这样读取你的参数。

this.props.navigation.state.params.category

【讨论】：

非常感谢！我已经被这火困住了一段时间。我是否因为将 id 变量设置为参数而覆盖了它？
是的，您正在覆盖参数，因此您尝试传递的 id 实际上并不是您在 for 循环中创建的 id。

【解决方案4】：

从父屏幕：

navigate({ routeName: 'Category',  params: { category: id } })

或

navigate('Category', { category: id })

从子屏幕：

const category = this.props.navigation.state.params.category

【讨论】：

我刚试过这个，但它似乎仍然返回undefined。
你的id从哪里来的 {...?
恐怕这是错误的。参数传递错误。
你少了一个括号。我编辑了答案。
更新后的答案似乎更糟。该页面不导航或发送数据。什么都没有发生。