ListView中的显示与隐藏



  • renderDay(rowData) {
    return (
    <View>
    {this.state.type === false ?
    <TouchableOpacity style={{flexDirection: 'row'}} onPress={()=>{this.setState({type:true})}}>
    <Text style={{color: '#ccc', marginBottom: 10, fontSize: 16}}> 显示</Text>
    <Image style={{width: 20, height: 20, marginLeft: 10}}
    source={require("../image/loginImage/icon_open_02.png")}/>
    </TouchableOpacity>:
    <TouchableOpacity style={{flexDirection: 'row'}} onPress={()=>{this.setState({type:false})}}>
    <Text style={{color: '#ccc', marginBottom: 10, fontSize: 16}}> 隐藏</Text>
    <Image style={{width: 20, height: 20, marginLeft: 10}}
    source={require("../image/loginImage/icon_stop.png")}/>
    </TouchableOpacity>}
    </View>

    )
    

    };
    render(){
    return(
    <ListView
    style={styles.itemsList}
    dataSource={this.state.dataSourceDay}
    enableEmptySections={true}
    renderRow={this.renderDay.bind(this)}
    />
    )
    }
    在Listview 中有一个dataSourse,然后调用render之外的方法,type初始值为false,点击显示,页面没有什么变化,打印出来的结果为type以及改变为true
    状态已经改变,但是页面没有变化,
    不用ListView直接写在render里边,状态改变,显示变为隐藏...有人知道这是为什么吗??想要在ListView中实现这种功能该怎么办,求大神临幸!!!



  • 我们去看一下ListView.js的源码可以看到0_1499137711298_image.png
    row是否刷新,是取决于datasource的变化.
    而且,一个item的隐藏和显示,是这个rowData的属性,而不应是state来控制。
    你的思路本身就是错的。


登录后回复