时间戳

首页 > 解决方案 > React Navigation 将自定义数据传递到堆叠的屏幕

reactjs - React Navigation 将自定义数据传递到堆叠的屏幕

问题描述

我正在尝试理解react-navigation以在 react-native 中的屏幕之间导航。

所以首先我创建了一个这样的堆叠视图

import { createStackNavigator } from 'react-navigation';
import Home from './home';
import CoinCapCharts from "./src/container/CoinCapCharts.js"

const screen = createStackNavigator({
  Home: { screen: Home },
  CoinCapCharts: { screen: CoinCapCharts}
},{
    initialRouteName: 'Home',
    headerMode: 'none'
});

export default screen;

然后我button在Home其中添加了一个将导航到CoinCapCharts

这就是我的按钮的Home样子

   <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('CoinCapCharts')}>

[问题：]现在我还想向我的CoinCapChartsie 发送一些东西作为道具，即如果用户点击Bitcoin容器，我想发送一些东西name，CoinCapCharts以便它可以显示与之相关的图表（和数据）。我怎样才能做到这一点？

标签： reactjsreact-native

解决方案

一种可能的解决方案是将 react-redux 与 react-navigation 结合使用。在导航到另一个组件之前，您将调度一个操作来更新 redux 存储中的状态。mapStateToProps()然后组件通过函数接收道具。

推荐阅读