React native 如果listview为空，则显示消息

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

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

`

---

`

我最初误解了标题的含义，认为它是一个独立于ListView的组件。为了在ListView之外显示一条单独的消息（而不是作为它的替代），我将使用flex样式来确定ListView应该占据整个高度还是只占一个百分比。在后一种情况下，您可以在ListView下面呈现消息，以便两者都出现

可以将ListView和message的呈现分为两个函数，如下所示：

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

\u renderMessage（）{
返回(
列表为空
)
}
render（）{
const ListViewProtopy=this.state.dataSource.getRowCount（）==0？0.5:1
返回(
{如果（ListViewProtopy！=1）{
这是._renderMessage（）
}}
)
}

也许这有助于你了解自己想要什么。你试过这样的东西吗

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

构造函数（道具）{
超级（道具）；
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
此.state={
数据源：ds.cloneWithRows（[]），
}
}
renderIf（条件）{
如果（条件）{
返回（{rowData}}/>）
}否则{
返回（没有数据）
}
}
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（）{
返回(
{this.renderIf（this.state.dataSource.getRowCount（））}
);
}

---

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

在ListViewDataSource中有一个属性\u 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>
    )
}

render（）{
返回(
{this.state.dataSource.\u cachedRowCount>0//条件
？//如果为真
：//如果为false
什么也没找到
}
)
}

我有一个包含章节标题的列表视图。。。在编解码器中编辑可以发布完整的渲染功能吗？

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