react-native - 如果 listview 为空则显示消息 react native

Question

如果 List View 是空的，我想显示标题(正在发生)并显示一个替代文本说“List is Empty”。

我尝试执行 getRowCount()，它返回 0。但是我怎样才能在同一 View 中插入文本。

`

<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>
    )
}