Question

如果列表视图为空，我想显示标题（正在发生）并显示另一个文本说“列表为空”。

我尝试执行getRowCount（），返回0.但是如何在同一视图中插入文本。

`

<Image source={require('./img/background.png')}  style={GlobalStyles.bgImageContainer}>

            <ListView style={{margin: 5}}
                      initialListSize={10}
                      dataSource={this.state.familydataSource}
                      renderRow={this.renderRow}
                      renderSeparator={::this._renderSeparator}
                      renderSectionHeader={this.renderFamilySectionHeader}
                      enableEmptySections={true}
            />


            <ListView style={{margin: 5}}
                      dataSource={this.state.friendsdataSource}
                      renderRow={this.renderRow}
                      renderSeparator={::this._renderSeparator}
                      renderSectionHeader={this.renderFriendsSectionHeader}
                      enableEmptySections={true}
            />

        </Image>

`

Answer 1

我最初误解了你的标题是什么意思，认为它是一个独立于ListView的组件。要显示除ListView之外的单独消息（而不是替换它），我将使用flex样式来确定ListView是应该占据整个高度还是仅占一个百分比。在后面的例子中，您可以在ListView下面呈现消息，以便两者都显示出来。

您可以将ListView和消息的呈现分成两个函数，如：

_renderMessage() {
    return (
        <View style={{ flex:0.5 }}>
            <Text>List is Empty</Text>
        </View>
    )
}

render() {
    const listViewProportion = this.state.dataSource.getRowCount() == 0 ? 0.5 : 1
    return (
        <View style={{ flex:1 }}>
            <ListView
                style={{ flex: listViewProportion }}
                ...
            />
            {if (listViewProportion != 1) {
                this._renderMessage()
            }}
        </View>
    )
}

Answer 2

也许这可以帮助你了解你想要的东西。你尝试过这样的事吗？

constructor(props) {
  super(props);
  const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  this.state = {
    dataSource: ds.cloneWithRows([]),
  }
}

renderIf(condition){
  if(condition){
     return (<ListView
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text>{rowData}</Text>} />)
  } else{
     return (<Text> There is no data </Text>)
  }
}

componentDidMount(){
  var datos = ['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin']

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

  this.setState({dataSource: ds.cloneWithRows(datos)})
}


render(){  
 return(
        {this.renderIf(this.state.dataSource.getRowCount())}   
 );
}

在这个例子中，我想我们从数组中的0个元素开始。所以构造函数首先运行，然后我声明我的dataSource有0个元素。在此之后，执行渲染方法。由于有0个元素，当我们调用renderIf时，它将返回if语句的第二部分。一旦render方法完成，那么将调用componentDidMount方法，在这个方法中我们将执行所有操作，以便从我们的服务器中检索我们的数据。一旦这个方法结束，我们的dataSource就会有信息，所以它将使用我们所有的信息呈现ListView。

Answer 3

在 ListViewDataSource 中，有一个属性 _cachedRowCount ，其中包含一个数字，该数字的总行数为ListView

以下是如何处理空ListView消息的示例：

render() {
    return (
        <View style={styles.listViewContainer}>
            {this.state.dataSource._cachedRowCount > 0 // condition
                ? // if true
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                >
                </ListView>
                : // if false
                <Text>Nothing found</Text>
            }
        </View>
    )
}

如果listview为空则显示消息本机响应

3 个答案: