从标头组件传递数据的好习惯是什么答案

【问题标题】：What's the good practice to pass data from a header component从标头组件传递数据的好习惯是什么
【发布时间】：2020-04-16 08:38:34
【问题描述】：

在我的 stackNavigator 中，我制作了一个名为 SearchBarHeader 的自定义组件，它位于标题内

在 SearchBarHeader 组件中有一个 state，即用户正在搜索什么

我需要该状态来更新我的 Search 组件中的 FlatList 组件

我的问题是我应该为 redux 做什么？通过 navigationOption 传递数据？还有什么？

const SearchStack = createStackNavigator(
  {
    Search: {
      screen: Search,
      navigationOptions: ({ navigation }) => ({
        headerTitle: <SearchBarHeader navigation={navigation} />
      })
    },
  },
  {
    initialRouteName: "Search"
  }
);

【问题讨论】：

标签： react-native react-redux

【解决方案1】：

我建议使用 redux，使用 redux，您可以将所有应用程序状态存储在一个对象中，所有组件都可以访问该对象。如果您使用 navigationOption 来传递您的数据，那么当您的应用逻辑增长时，维护您的应用会更加困难

【讨论】：

【解决方案2】：

Redux 非常适合状态管理和组件之间的数据传递，但它的学习曲线相当长。

但在父子数据传递中，您可以简单地使用道具。

在父母中，

this.props.navigation.navigate('ChildComponent', {my_data: 'this is the sample data string'})

在孩子中，

this.props.navigation.state.params.my_data

这是最简单的方法。

除此之外，您还可以使用非常容易学习和实现的 React 上下文 API。您可以在此处参考文档。 https://reactjs.org/docs/context.html

【讨论】：