- 我正在开发一个带有 React-navigation 的 React-Native 应用。
- 用户打开应用时看到的第一个屏幕有一个
FlatList
组件,其中列出了一些产品并显示其名称。 - 当用户点击任何产品时,他会导航至产品详细信息,并且可以更改产品名称。
- 然后,当他导航回列表屏幕时,产品的新名称应显示在原始名称的位置。
我尝试向 FlatList
组件添加 extraData
属性,但它没有按预期工作。
<FlatList
data={this.state.washers}
extraData={this.state}
renderItem={this.renderItem}
keyExtractor={item => item.serialNumber}/>
state.washers
是一个对象数组,该对象的属性之一是名称。
this.state.washers: Array(2):
0: {serialNumber: "20197", model: "", name: "first washer"}
1: {serialNumber: "201908301", model: "", name: "washer 2"}
当用户更改产品(洗衣机)的名称时,它会保存在名为 {~productSerialNumber~}Name.txt
这是监听屏幕焦点
事件的代码
focusListener = this.props.navigation.addListener('didFocus', async () => {
let washers = [];
if (await ReactNativeFS.exists(`${ReactNativeFS.DocumentDirectoryPath}/washers.json`)) {
washers = await ReactNativeFS.readFile(`${ReactNativeFS.DocumentDirectoryPath}/washers.json`, "ascii");
washers = JSON.parse(washers);
}
washers.forEach(async washer => {
const washerName = await ReactNativeFS.readFile(`${ReactNativeFS.DocumentDirectoryPath}/maquinas/${washer.serialNumber}Name.txt`);
washer.name = washerName;
});
this.setState({washers});
});
}
好吧,当我返回列表屏幕时,我可以看到状态已更改并使用新名称进行更新,但 FlatList
组件中没有显示任何更改。
我所看到的是,当我单击名为“name0”(例如)的产品并将其名称更改为“name1”(例如)时,然后返回到列表屏幕,然后单击同一产品并将其名称更改为“name2”(例如),则 FlatList
将显示“name1”作为名称
抱歉英语不好,感谢您的帮助! <3
最佳答案
查看 React Navigation 文档,您可以尝试使用 withNavigationFocus
而不是 didFocus
监听器。
import React, { Component } from "react";
import { View } from "react-native";
import { withNavigationFocus } from "react-navigation";
class MyScreen extends Component {
componentDidMount() {
this.updateWashers();
}
componentDidUpdate(prevProps) {
// Check that screen is newly focused
if (this.props.isFocused && prevProps.isFocused !== this.props.isFocused) {
this.updateWashers();
}
}
updateWashers() {
// put in your code to read saved data
}
render() {
return <View />;
}
}
export default withNavigationFocus(MyScreen );
改编自https://reactnavigation.org/docs/en/3.x/function-after-focusing-screen.html
关于javascript - 当屏幕获得焦点时如何重新渲染react-native FlatList?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57822402/