React Navigation:当值来自 redux 并在子级中更新时，如何更新父级的导航标题? [英] React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?

问题描述

我正在使用 react-navigation 并且有一个带有 的 StackNavigatorParentScreen 和 ChildScreen.

I'm using react-navigation and have a StackNavigator with a ParentScreen and a ChildScreen.

两个屏幕都有相同的导航栏，带有来自 redux 的动态值.如问题#313

Both screens have the same navigation bar with a dynamic value from redux. Implemented like described in Issue #313

这按预期工作.当我在 DetailScreen 中更新计数变量的值时，它也会更新导航栏中的值.

This works as expected. When I'm in DetailScreen and I update the value for the count variable, it also updates the value in the navigation bar.

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

Problem is, if I go back to the parent scene, there is still the old value in the navigation bar. It doesn't update to the current value in redux store.

儿童

父母(当我回去的时候)

子屏幕

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 : ''}`
  };
}

有什么建议吗?

推荐答案

我的建议:

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

1. Make sure that ParentScreen is connected through react-redux connect function.

如果您希望 ParentScreen 的标题在商店状态更改时自动更新，仅连接它是不够的.您将不得不像在 ChildScreen 组件中那样使用 componentWillReceiveProps.

If you want the title of ParentScreen to get updated automatically when the state of the store changes, connecting it won't be enough. You will have to use the componentWillReceiveProps like you are doing in the ChildScreen Component.

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

Bonus: you could create a Higher Order Component for encapsulating that behaviour, like this:

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

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

And then you could use it like this:

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

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

这篇关于React Navigation:当值来自 redux 并在子级中更新时，如何更新父级的导航标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！