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

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

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

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

两个屏幕都具有相同的导航栏，其动态值来自redux。像问题＃313中描述的那样实现

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.

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

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.

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

Child

儿童

Parent (when I go back)

家长（当我回去时）

ChildScreen

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

ParentScreen

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

Any advice?

任何建议？

4 个解决方案

#1

My advice:

我的建议：

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

   确保通过react-redux连接功能连接ParentScreen。

2. 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.

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

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

#2

OP, this is likely to be a problem with your redux implementation. Are you familiar with how redux implements its store? I see no mention here which means it is likely that your increment function is merely updating the child component's state instead of dispatching actions and reducers. Please have a look at a proper redux implementation like this one: https://onsen.io/blog/react-state-management-redux-store/

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

#3

Have a common reducer for both parent and child. That way all the components(parent and child in your case) will get notified when the state changes.

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

Write a connect function for both parent and child. You'll receive the updated state in componentWillReceiveProps method. Use it as you please.

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

Hope it will help.

希望它会有所帮助。

#4

You need to use props in order to pass the incremented value from child to parent component.

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

find the article below. It has a great example of communications between parent and child components.

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

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

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

Thanks

谢谢