React Navigation:当值来自 redux 并在子级中更新时,如何更新父级的导航标题?

IT技术 reactjs react-native react-navigation
2021-05-24 17:59:01

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

两个屏幕都有相同的导航栏,带有来自 redux 的动态值。实现如问题 #313 中所述

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

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

孩子

屏幕截图 2017-04-11 at 15 20 28

父母(当我回去时)

屏幕截图 2017-04-11 at 15 21 31

儿童屏幕

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

父屏幕

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

有什么建议吗?

4个回答

我的建议:

  1. 确保ParentScreen通过 react-reduxconnect功能连接

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

OP,这很可能是您的 redux 实现的问题。你熟悉 redux 是如何实现它的 store 的吗?我在这里没有提到这意味着您的增量函数很可能只是更新子组件的状态,而不是分派操作和减速器。请看一下像这样的适当的 redux 实现:https : //onsen.io/blog/react-state-management-redux-store/

为父母和孩子有一个共同的减速器。这样所有组件(您的情况下的父组件和子组件)都会在状态更改时收到通知。

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

希望它会有所帮助。

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

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

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

谢谢