React Navigation：当值来自redux并在child中更新时，如何更新父级的导航标题？

Question

我正在使用react-navigation并使用带有 ParentScreen 和 ChildScreen 的StackNavigator。

两个屏幕都具有相同的导航栏，其动态值来自redux。像Issue #313

中描述的那样实施

这可以按预期工作。当我在DetailScreen中并更新count变量的值时，它还会更新导航栏中的值。

问题是，如果我回到父场景，导航栏中仍然存在旧值。它不会更新为redux store中的当前值。

儿童

父母（当我回去时）

ChildScreen

class ChildScreen extends Component {
  static navigationOptions = {
    title: ({ state }) => `Total: ${state.params && state.params.count ?  state.params.count : ''}`
  };

  componentWillReceiveProps(nextProps) {
    if (nextProps.count != this.props.count) {
      this.props.navigation.setParams({ count: nextProps.count });
    }
  }

  render() {
    return (
      <View>
        <Button onPress={() => this.props.increment()} title="Increment" />
      </View>
    );
  }
}

ParentScreen

class ParentScreen extends Component {
  static navigationOptions = {
  title: ({ state }) => `Total: ${state.params && state.params.count ?    state.params.count : ''}`
  };
}

有什么建议吗？

Answer 1

我的建议：

1. 确保ParentScreen通过react-redux connect函数连接。

2. 如果您希望在商店状态发生变化时自动更新ParentScreen的标题，则连接它是不够的。您必须像在componentWillReceiveProps组件中一样使用ChildScreen。

奖励：您可以创建一个更高阶的组件来封装该行为，如下所示：

const withTotalTitle = Component => props => {
  class TotalTitle extends Component {
    static navigationOptions = {
      title: ({ state }) => `Total: ${state.params && state.params.count ?  state.params.count : ''}`
    };

    componentWillReceiveProps(nextProps) {
      if (nextProps.count != this.props.count) {
        this.props.navigation.setParams({ count: nextProps.count });
      }
    }

    render() {
      return (
        <Component {...props}/>
      );
    }
  }

  return connect(state => { count: state.total })(TotalTitle); // update this (I have no idea what the structure your state looks like)
};

然后你可以像这样使用它：

const ChildScreen = withTotalTitle(({ increment }) => (
  <View>
    <Button onPress={() => increment()} title="Increment" />
  </View>
));

const ParentScreen = withTotalTitle(() => (
  <View>
    <Text>Whatever ParentScreen is supposed to render.</Text>
  </View>
));

Answer 2

OP，这可能是您的redux实现的问题。您熟悉redux如何实现其商店？我在这里没有提到这意味着你的增量函数可能只是更新子组件的状态而不是调度动作和减少器。请查看正确的redux实现，例如：https://onsen.io/blog/react-state-management-redux-store/

Answer 3

为父母和孩子都有一个共同的减速器。这样，当状态发生变化时，所有组件（您的案例中的父组件和子组件）都会收到通知。

为父母和孩子写一个连接函数。您将在componentWillReceiveProps方法中收到更新的状态。随便使用它。

希望它会有所帮助。

Answer 4

您需要使用props才能将递增的值从子组件传递给父组件。

找到下面的文章。它有一个很好的父子组件之间的通信示例。

http://andrewhfarmer.com/component-communication/

由于