如何更新 ListView？答案

【问题标题】：How update ListView?如何更新 ListView？
【发布时间】：2017-03-25 11:27:17
【问题描述】：

我有一个问题。我需要用新数组更新 ListView，但我看到的是空的 ListView 而不是我的项目。没有错误，只是白屏...如何解决？

如果删除 sendMes()，则应用程序工作。

constructor(props){
super(props);
var ds= new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
});

var Dimensions = require('Dimensions')      //определяем размеры экрана
var {widthScr, heightScr} = Dimensions.get('window')

var messagesArray = [
  {message: "Hello", style: styles.nikkiMes},
  {message: "Okkkk", style: styles.userMes}
];

this.state = {
  messagesSource: ds.cloneWithRows(messagesArray.slice()),
  inputMes: '',
  messagesArray: messagesArray
};}

renderMessages(rowMessages){
return(
    <Text style={rowMessages.style}>{rowMessages.message}</Text>
);}

sendMes(){
var ds= new ListView.DataSource({
    rowHasChanged: (r1, r2) => r1 !== r2
});

this.setState({
  messagesArray: this.state.messagesArray.concat({message: this.inputMes, style: styles.userMes}),
  messagesSource: ds.cloneWithRows(this.state.messagesArray.concat({message: this.inputMes, style: styles.userMes}).slice())
});}

render() {
return (
  <View styyle={{flex: 1, alignItems: 'center', flexDirection: 'row'}}>
    <ListView
      dataSource={this.state.messagesSource}
      renderRow={this.renderMessages.bind(this)}
    />
    <TextInput
      style={{height: 50}}
      placeholder="Type here..."
      onChangeText={(inputMes) => this.setState({inputMes})}
    />
    <TouchableHighlight onPress={this.sendMes()}> <Text>Button</Text> </TouchableHighlight>
  </View>
);}

如何向 ListView 添加新项目？

【问题讨论】：

标签： android listview mobile react-native

【解决方案1】：

您在 sendMes 函数中覆盖了您的数据源。要更新您的 ListView，只需使用新项目/数据更新状态

this.setState({
  messagesSource: ds.cloneWithRows(this._generate_new_items()),
});

将上述函数放入您的 setMes 函数中并创建一个新函数“_generate_new_items”，该函数将生成将在您的 ListView 中更新的新项目。您可以使用 _generate_new_items 函数，如下所示：

_generate_new_items(){
    var dataBlob = [];
    for (var ii = 0; ii < 100; ii++) {
       dataBlob.push('Row ' + ii);
    }
    return dataBlob;
}

如需帮助，请参阅https://facebook.github.io/react-native/docs/listview.html

【讨论】：