Question

我试图理解react-navigation以在本机屏幕之间导航。

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

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')}>

[问题：] 现在，我也想向我的CoinCapCharts发送一些道具，即如果用户点击Bitcoin容器，我想发送一些东西，例如{ {1}}至name，以便它可以显示与其相关的图表（和数据）。我该如何实现？

Answer 1

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

Answer 2

您可以按照以下方式发送所需的内容（例如“名称”）。

this.props.navigation.navigate('CoinCapCharts',
  { name: name,
    ... // otherthings to send
 });

在CoinCapCharts屏幕上，您可以获取名称值： this.props.navigation.state.params.name

反应导航将自定义数据传递到堆叠的屏幕

2 个答案: