Question

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

SearchBarHeader 组件中有一个状态，即用户正在搜索的内容

我需要该状态来更新我的搜索组件内的 FlatList 组件

我的问题是我应该怎么去做redux？通过NavigationOption传递数据？还有吗？

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

Answer 1

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

Answer 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

从标头组件传递数据的最佳实践是什么

2 个答案: