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

Question

我正在使用 react-navigation 并且有一个带有 ParentScreen 和 ChildScreen[ 的 StackNavigator =46=].

两个屏幕都有相同的导航栏，带有来自 redux 的动态值。按照 Issue #313
中的描述实施
这按预期工作。当我在 DetailScreen 中更新计数变量的值时，它还会更新导航栏中的值。

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

Child

Parent（我回去的时候）

Child屏幕

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

Parent屏幕

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

有什么建议吗？

Answer 1

我的建议：

确保ParentScreen通过react-reduxconnect函数连接。
如果您希望 ParentScreen 的标题在商店状态更改时自动更新，仅连接它是不够的。您必须像在 ChildScreen 组件中那样使用 componentWillReceiveProps。

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

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 是如何实现它的 store 的吗？我在这里没有看到任何提及，这意味着您的增量函数很可能只是更新子组件的状态，而不是分派动作和缩减器。请看一下像这样的正确的 redux 实现：https://onsen.io/blog/react-state-management-redux-store/

Answer 3

parent 和 child 有一个共同的减速器。这样所有组件（在您的情况下为 parent 和 child）都会在状态更改时收到通知。

为 parent 和 child 编写连接函数。您将在 componentWillReceiveProps 方法中收到更新后的状态。随意使用。

希望对您有所帮助。

Answer 4

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

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

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

谢谢

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

React Navigation: How to update navigation title for parent, when value comes from redux and gets updated in child?

reactjs

react-native

react-navigation