当屏幕获得焦点时，如何重新渲染反应原生平面列表?

Question

• 我正在开发一个带有反应导航的 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的文本文件中

这是侦听screen focus事件

的代码

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

Answer 1

查看 React 导航文档，您可以尝试使用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

Answer 2

把这段代码放在你的构造函数中。我希望它能帮助你。

this.props.navigation.addListener(
'didFocus',
payload => {
// call method which you want to call 
// call those method where your state is update
});
}