React Navigation: как обновить заголовок навигации для родителя, когда значение поступает из redux и обновляется в дочернем?

Я использую реагировать-навигации и есть StackNavigator с ParentScreen и a ChildScreen.

оба экрана имеют одинаковую панель навигации с динамическим значением из redux. Реализовано как описано в выпуск #313

это работает, как ожидалось. Когда я нахожусь в DetailScreen и обновляю значение переменной count, он также обновляет значение в панели навигации.

проблема в том, если я вернитесь к родительской сцене, в панели навигации все еще есть старое значение. Он не обновляется до текущего значения в Redux store.

ребенок

screen shot 2017-04-11 at 15 20 28

родитель (когда я вернусь)

screen shot 2017-04-11 at 15 21 31

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

какие-либо советы?

11
react-native react-navigation reactjs

4 ответов

мои советы:

  1. убедитесь в том, что ParentScreen подключается через react-redux .

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

OP, это, вероятно, будет проблемой с вашей реализацией redux. Вы знакомы с тем, как redux реализует свой магазин? Я не вижу здесь упоминания, что означает, что ваша функция приращения просто обновляет состояние дочернего компонента вместо диспетчеризации действий и редукторов. Пожалуйста, посмотрите на правильную реализацию redux, такую как эта:https://onsen.io/blog/react-state-management-redux-store/

2

имейте общий редуктор как для родителя, так и для ребенка. Таким образом, все компоненты(родитель и ребенок в вашем случае) получите уведомление при изменении состояния.

напишите функцию connect как для родителя, так и для ребенка. Вы получите обновленное состояние в методе componentWillReceiveProps. Используй это как хочешь.

надеюсь, это поможет.

2

вам нужно использовать реквизит, чтобы передать увеличенное значение от дочернего к родительскому компоненту.

найдите статью ниже. Он имеет отличный пример связи между родительскими и дочерними компонентами.

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

спасибо

1