Могу ли я подписаться на this.props.navigation.state.params?

Question

Интересно, если в screenA у меня есть объект data = {}, который будет динамически изменен, могу ли я получить изменения в screenB, просто отправив этот реквизит с screenA через this.props.navigation.navigate('screenB', {data})?

И в screenB, чтобы иметь componentWillReceiveProps(nextProps), чтобы получить эти изменения через что-то вроде nextProps.navigation.state.param.data

Или есть способ добиться этого?

Answer 1

Вы можете использовать onWillFocus из NavigationEvents, который срабатывает при каждом переходе к экрану.

_willFocus = () => {
  const { navigation } = this.props
  const data = navigation.getParam('data', null)
  if (data !== null) {
    /* do something */
  }
}

/* ... */

render () {
  return (
    <View>
      <NavigationEvents onWillFocus={_willFocus()}
    </View>
  )
}

Answer 2

Это просто, как вы сказали: отправьте некоторые данные navigation.navigate('screenB', { data }) и получите их на экране B как navigation.state.params.data.

Я согласен с @FurkanO. Вы, вероятно, показываете, что используете Redux вместо этого, чтобы контролировать все состояние вашего приложения, но для простых вещей, я думаю, нет необходимости!

Я сделал простую демонстрацию закусок, чтобы показать вам: snack.expo.io/@abranhe/stackoverflow-56671202

Вот код для продолжения:

Главный экран

class HomeScreen extends Component {
  state = {
    colors: ['red', 'blue', 'green'],
  };

  render() {
    return (
      <View>
        {this.state.colors.map(color => {
            return <Text>{color}</Text>;
        })}
        <View>
          <Text>Details Screen</Text>
          <Button
            title="Go to Details"
            onPress={() => this.props.navigation.navigate('Details', { colors: this.state.colors })}
          />
        </View>
      </View>
    );
  }
}

Экран сведений

class DetailsScreen extends Component {
  state = {
    colors: [],
  };

  componentWillMount() {
    this.setState({ colors: this.props.navigation.state.params.colors });
  }

  render() {
    return (
      <View>
        {this.state.colors.map(color => {
            return <Text>{color}</Text>;
        })}
        <Text>Details Screen</Text>
      </View>
    );
  }
}

Обновление

Автор вопроса запросил обновление, чтобы добавить setTimeout(), чтобы увидеть точный момент, когда данные находятся на другом экране, поэтому оно будет выглядеть так:

componentWillMount() {
    setTimeout(() => {
      this.setState({ colors: this.props.navigation.state.params.colors });
    }, 3000);
}