如何更新列表视图

Question

我有一个道具。我需要用新数组更新列表视图，但我看到的是空的列表视图而不是我的项目。没有错误，只是白屏...如何解决？

如果删除 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>
);}

如何将新项目添加到列表视图？

Answer 1

您正在 sendMes 函数中覆盖您的数据源。要更新您的列表视图，只需使用新项目/数据更新状态

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