当父状态变化时，反应范围重新渲染路线

Question

我有一个页面，该页面以特定的间隔从源接收数据并将其设置为状态，我在页面内显示了该数据的一部分，并且我有一个按钮，打开另一个页面（通过React-Navigation），我希望在其中显示其余数据，但是问题是，当父母更改状态更改（以下）简化代码时，它不会刷新第二页：

import React from "react";
import { View, Text, Button } from "react-native";
import { createStackNavigator, createAppContainer, NavigationActions } from "react-navigation";
class HomeScreen extends React.Component {
  constructor() {
    super();
    this.state = { number: 0 };
  }
  genNumber() {
    number = Math.random();
    this.setState({ number });
  }
  componentWillMount() {
    setInterval(() => { this.genNumber() }, 1000);
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
        <Button title="Go" onPress={() => this.props.navigation.navigate('Test', { k: () => this.state.number })} />
      </View>
    );
  }
}
class TestScreen extends React.Component {
  constructor() {
    super()
    this.state = { t: 1 };
  }
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Test {this.props.navigation.getParam('k')()}</Text>
      </View>
    );
  }
}
const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
  Test: {
    screen: TestScreen
  }
});
export default createAppContainer(AppNavigator);

Answer 1

您正在使用导航参数将数据从父类传递到子类，并且您需要反映儿童类中的状态变化，但它在其中不起作用。

为此使用组件并传递数据作为道具，您可以立即反映数据。

Answer 2

如果通过参数传递到该数据传递给它，则不会重新渲染屏幕，不幸的是，这就是React Navigation的工作原理。为了解决它，您可以更改屏幕之间的数据传递方式。而不是使用导航参数使用全局状态（示例redux）。在这种情况下，将数字变量设置为redux中的状态，然后在测试屏幕中选择该数字，当数字更改时，它将触发重新渲染。