如何在 React-Native 中重新加载平面列表？

Question

我正在从 android 切换到 React Native。完全天真。我想在本机反应中实现类似 recyclerview 的东西，并发现了 FLATLIST 现在问题是最初我的数据变量是空的，后来我将数据添加到该变量中。现在我如何通知平面列表数据已更改并且现在应该重新呈现自己。

就像在 recyclerview 中一样，我们使用 adapter.notifyDataSetChanged();通知回收者视图它现在应该重新呈现自己的变化

我使用的代码是

export default class Convo extends Component{

constructor(props){
super(props);
this.state = {
  loggedIn: 'false',
  title: 'Login/SignUp',
  messages: []
};
this.downloadConversation = this.downloadConversation.bind(this);
}

componentDidMount(){
this.downloadConversation();
}

 downloadConversation(){
    this.setState(
      {message: [
        {
            key: "HIHI",
            name: "lets  this bullshit",
            message: "I i i"
          },
          {
              key: "HIHI2",
              name: "lets change  bullshit",
              message: "I i i"
            },
            {
                key: "HIHI3",
                name: "lets change this ",
                message: "I i i"
              }
      ]}
    );
//After updating the messages object, i want to notify flat list about 
//the change, basically i will be updating this object asynchronously  
// in background which will take time. for now i am updating directly 
//to show you
}


renderFlatListItem(item) {
return (
  <View key={item.key} style={styles1.flatviewItem}>
     <Text>User1</Text>
     <Text style={styles1.name}>{item.name}</Text>
     <Text style={styles1.messageStyle}>{item.message}</Text>
   </View>
   )
   }

 render(){
  return(
    <View style={styles1.container}>
      <View style={styles1.header}>
        <Text style={styles1.h2style}>Conversation List</Text>
      </View>
      <FlatList
        style={styles1.flatview}
        extraData={this.state}
        keyExtractor={item=>item.key}
        showsVerticalScrollIndicator={true}
        data={this.state.messages}
        renderItem={({item}) => this.renderFlatListItem(item)}
      />
    </View>
  );
 }

}

Answer 1

您的组件应该在组件状态更改时自动重新呈现（如果您的呈现方法中的任何内容引用了已更改的状态）。我认为当您在 downloadConversation() 方法中设置状态时，您只需要将 'message' 更改为 'messages'。您的 FlatList 正在寻找 this.state.messages，而不是 this.state.message，并且 this.state.messages 永远不会改变。只需更正该拼写错误并希望能更正它。

如何在 React-Native 中重新加载平面列表？

How to reload flat list in React-Native?

react-native

react-native-flatlist