Question

使用stack navigator导航器考虑一个简单的react-native：

const stackNav = createStackNavigator(
  {
    CustomerList: {
      screen: CustomerList,
      navigationOptions: {
        title: "Select a customer"
      }
    },
    CustomerDetail: {
      screen: CustomerDetail
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: colors.dark
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

export default stackNav;

在客户列表中使用CustomerDetail道具调用

navigation。

CustomerList和CustomerDetail都包含特定的状态，例如用户单击以打开详细信息的列表位置，列表中的选定项目，详细信息深度等等。

我注意到的是，从CustomerList到CustomerDetail的每个屏幕上，组件都在重新渲染，调用componentWillMount。这样一来，我便失去了之前的所有状态，从而导致了列表和细节上用户上下文的松动。

我需要一种存储状态的方法，我可以想到3种选择：

a。然后将其存储在React Context上，并重新加载到componentWillMount上

b。将状态存储在AsyncStorage

c。找到一种在CustomerDetail和`CustomerList``

之间共享公共状态的方法

（a）和（b）在这里没有看到这种情况，因此我的问题是如何在react navigatior的两个组件之间共享一个公共状态。我很确定这应该很简单，但是我不知道该怎么做。

Answer 1

如果要在不同组件之间共享状态，则有两种方法：

选项1：使用父组件

使用组件中最接近的公共祖先将所需的所有数据保存在其状态下，然后通过props将其向下传递。如果希望这些子组件能够修改数据，请让父组件传递一个或多个回调函数来更新父组件的状态。

这是一种简单而轻巧的方式。

选项2：使用Redux

Redux可以保持应用程序的整个状态，并且可以从任何所需的组件中访问和更新。

如果要使用许多不同的组件或以许多不同的方式来执行此操作，这就是您要采用的方式。缺点是设置确实需要一些努力，因此，如果这是应用程序中唯一需要各种组件共享状态的时间，则Redux可能会过大，但是如果您有更多的东西或者事情变得更加复杂，那就是一个好方法。

以下是Redux上的文档：https://redux.js.org/，特别是有关React的用法：https://redux.js.org/basics/usagewithreact

Answer 2

另一个选择是在导航操作中传递参数。 navigation.navigate方法接受第二个参数（对象），该参数将在下一个屏幕中显示。

navigation.navigate('CustomerDetail', { someData: 'yo' })

然后在CustomerDetail中，可以按以下方式访问它：

this.props.navigation.state.params.someData

或者：

this.props.navigation.getParam(paramName, defaultValue)

阅读this

如何在反应导航组件之间保持相同的状态？

2 个答案: