我可以订阅this.props.navigation.state.params吗？

Question

我想知道在jumpTo(0)中是否有一个对象screenA是否会动态更改，是否可以通过仅从data = {}发送该道具到screenB中接收更改screenA？

在this.props.navigation.navigate('screenB', {data})中有一个screenB通过componentWillReceiveProps(nextProps)之类的东西来进行此更改

还是有办法实现这一目标？

Answer 1

这很容易，就像您所说的：发送一些数据navigation.navigate('screenB', { data })并以navigation.state.params.data的形式在屏幕B中接收。

我同意@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);
}

Answer 2

您可以使用NavigationEvents中的onWillFocus，每当浏览屏幕时都会触发。

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

/* ... */

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