时间戳

首页 > 解决方案 > 用条件对本机列表视图做出反应

listview - 用条件对本机列表视图做出反应

问题描述

我想在 react native 的 listview 中使用条件，我的代码是：

    constructor(props) {
      super();
      const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
      this.state = {
        dataSource: ds.cloneWithRows(props.data)
      };
      console.log(props.data)
    }    
render()
{
return (
<ListView
dataSource ={this.state.dataSource}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderRow={(rowData) => 
<TouchableOpacity style={{backgroundColor:'#fbeded'}}>
<Text style={{textAlign:'right',alignItems:'flex-end',width:'100%',fontSize:18,paddingTop:10,marginRight:'15%',fontFamily:"B Nazanin+ Bold"}}>{rowData.name}</Text>
<View  style={styles.separator1} />
//how use this condition in listview 
if({rowData.address} !==null)
{
<View style={{flexDirection:'row'}}>
<Text style={{textAlign:'right',width:'90%',alignItems:'flex-end',fontSize:18,marginRight:10,marginTop:10,fontFamily:"B Nazanin+ Regular"}}>address
:{rowData.province_name}- {rowData.city_name}- {rowData.address}</Text>
<Icon style={{width:'5%',height:'100%',marginTop:10}}
  name='place'
  color='red'
  />
</View>
}
else
{
<View style={{flexDirection:'row'}}>
<Text style={{textAlign:'right',width:'90%',alignItems:'flex-end',fontSize:18,marginRight:10,marginTop:10,fontFamily:"B Nazanin+ Regular"}}>address
:{rowData.province_name}- {rowData.city_name}- {rowData.address}</Text>
<Icon style={{width:'5%',height:'100%',marginTop:10}}
  name='place'
  color='blue'
  />
}
</TouchableOpacity> 
}
/>)
}

我将 if..else 更改为 ?: 条件，但我无法在列表中显示我的条件，也无法同时显示 if 和 else。

标签： listviewreact-native

解决方案

通常条件渲染是用? :. 像这样：

<View> { (condition) ? <Text>Yes</Text> : <Text>No</Text> } </View>

如果这不是您要找的，请在您的问题中说明您的要求

推荐阅读