reactjs - 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 并将数据作为道具传递,您可以立即反映数据。
推荐阅读
- android - Flutter Blue 未检测到蓝牙打印机 (Zebra ez320)
- triggers - 如何在zabbix中创建用于检查应用服务状态的触发器
- flutter - How to make custom Bottom Navigation Bar in Flutter
- java - Not able to extract sdkmanager to install api "android 25"
- c++ - Mocking an 3rd party library using fakeit
- pyspark - Extract multiple Average and Moving average values over different columns in a dataframe using Pyspark
- android - 如何为我的应用程序允许 MIUI“在后台启动”权限
- pandas - 根据 pandas 中的条件删除重复项
- language-agnostic - 可重构的想法可以应用于软件系统开发吗?
- java - Spring Boot app not connecting to the database specified in application.property for Mongodb