Обновление состояния другого экрана в React Navigation

Question

import { createStackNavigator, createDrawerNavigator } from 'react-navigation'
import { Button, Text } from 'react-native'
import React, { Component } from 'react'

// Components

class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {value: 1}
  }

  render() {
    return (<Text>{this.state.value}</Text>)
  }
}

class Settings extends Component {
  _press = function () {
    // Update Home's state here
  }

  render() {
    return (<Button title='Update Home' onPress={this._press.bind(this)}></Button>)
  }
}

// Navigation

const homeNavigator = createStackNavigator({
  HomeScreen: {screen: Home}
})

const settingsNavigator = createStackNavigator({
  SettingsScreen: {screen: Settings}
})

const drawerScreens = createDrawerNavigator({
  Home: homeNavigator,
  Settings: settingsNavigator
})

export default createStackNavigator({
  drawer: { screen: drawerScreens, navigationOptions: { header: null } }
})

Я пытаюсь обновить состояние «Домой» с помощью моей кнопки в Настройках , оставаясь на том же экране (не используя this.props.navigation.navigate), но после поиска часов и часов я просто не могувыяснить, как это сделать.

Возможно ли это даже без чего-то вроде Redux?Изначально я решил использовать Redux для решения этой проблемы, но когда я узнал, что в этом сезоне они отказываются от официальной поддержки, я отказался от этого.

Answer 1

Это возможно при использовании NavigationActions.setParams следующим образом:

import { NavigationActions } from 'react-navigation';

const setParamsAction = NavigationActions.setParams({
  params: { value: 2 },
  key: 'screen-123',
});
this.props.navigation.dispatch(setParamsAction);

Обратите внимание, что вам необходимо использовать клавишу Начального экрана.Затем на главном экране вам необходимо прослушать изменяющуюся navigation опору и действовать в соответствии с этим изменением.Этого можно достичь, добавив событие жизненного цикла componentWillRecieveProps React или статический метод getDerivedStateFromProps.Ваши параметры будут ниже this.props.navigation.state.params.

Посмотрите здесь