React Native - 跨屏幕传递数据

IT技术 javascript reactjs react-native stack-navigator
2021-05-21 17:22:12

我在使用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>
    );
}
4个回答

您的问题不是发送参数。您发送正确，阅读正确。您的错误与您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

从父屏幕：

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

或者

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

从子屏幕：

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

所以看着上面描述的问题，我认为你正在寻找类似的东西screenProps（记录在这里）。

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

我希望这有帮助。如果您需要其他任何东西，请告诉我。

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

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

您可以使用 HomeScreen 收集参数，

this.props.navigation.state.params.username
其它你可能感兴趣的问题
上一篇使用 html2canvas 和 jspdf 在 React 中从 Html 生成 pdf 下一篇Oauth 错误 invalid_request：redirect_uri 未列入白名单