我有一个页面,它以特定的时间间隔从源中接收数据并将其设置为状态,我在页面中显示了该数据的一部分,还有一个按钮可以打开另一个页面(通过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);
答案 0 :(得分:0)
您正在使用导航参数将数据从父类传递到子类,并且您希望在子类中反映状态更改,但这种状态将不起作用。
为此,使用Component并将数据作为道具传递给您,即可立即反映数据。