react-native - 怎么实现react native中listview的item的选中状态?

问题描述

问 题

我想实现这样的话效果

当点击某项时，该项底部会出现下划线，目前界面已实现，但是未能实现选中状态,求大神解！
遇到的问题:使用setState时并不能正常实现效果。
代码如下:

var isSelectedArr = [true, false, false, false, false, false];//第一项默认选中
class MyAffair extends Component {
    // 默认属性
    static defaultProps = {};

    // 属性类型
    static propTypes = {};

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        var ds = new ListView.DataSource({rowHasChanged: (row1, row2)=>row1 !== row2});
        this.state = {
            dataSource: ds.cloneWithRows(tabs)
        };
    }

    renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <TouchableOpacity style={styles.row} onPress={()=> {
                isSelectedArr = [false, false, false, false, false, false];
                isSelectedArr[rowID] = !isSelectedArr[rowID];
                //打印是确定是需要的效果
                console.log(isSelectedArr);
            }}>
                <View>
                    <View style={styles.rowTitle}>
                        <Text style={{color: rowData[1]}}>{rowData[0]}</Text>
                    </View>
                    <View
                        style={[styles.underLine, {backgroundColor: isSelectedArr[rowID] ? rowData[1] : 'transparent'}]}/>//FIXME:然而此处无法正常渲染
                </View>
            </TouchableOpacity>
        )
    }


    // 渲染
    render() {
        return (
            <View style={styles.container}>
                <BackHeader left="<" title={this.props.title} onBack={()=> this.props.navigator.pop()}/>
                <Text style={styles.title}>我的办事</Text>
                <ListView contentContainerStyle={styles.grid} dataSource={this.state.dataSource}
                          pageSize={3} bounces={false}
                          renderRow={this.renderRow.bind(this)}/>
                <AffairList/>
            </View>
        );
    }

}

求大神给出一个解决的办法！多谢！

解决方案

var tabs = [];

renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <TouchableOpacity style={styles.row} onPress={() => {
                if (this.lastRowID) {
                    tabs[this.lastRowID].hidden = true;
                } else {
                    tabs[0].hidden = true;
                }
                tabs[rowID].hidden = false;
                var newTabs = JSON.parse(JSON.stringify(tabs));
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(newTabs)
                });
                this.lastRowID = rowID;//将上次点击过的储存起来
                this.getData(rowData.title);
                console.log(rowData.title);
            } }>
                <View>
                    <View style={styles.rowTitle}>
                        <Text style={{color: rowData.color}}>{rowData.title}</Text>
                    </View>
                    <View
                        style={[styles.underLine, {backgroundColor: rowData.color, opacity: rowData.hidden ? 0 : 1}]}/>
                </View>
            </TouchableOpacity>
        )
    }

这篇关于react-native - 怎么实现react native中listview的item的选中状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！