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