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

Question

我想实现这样的话效果

当点击某项时，该项底部会出现下划线，目前界面已实现，但是未能实现选中状态,求大神解！
遇到的问题:使用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>
        );
    }

}

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

Answer 1

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

Answer 2

每一个item都有一个类似id的东西，点击item后setState selectedItemId:当前的itemid，listview里进行比较id是否等于selectedItemId 给予不同的样式即可

Answer 3

看样子是没有刷新 ListView，你应该在 dataSource 中加入一个 isSelected 的属性，然后通过cloneWithRows方法去改变数据源

1.保存一个临时的数组

constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      tempDataSource: []
    };
  }

          this.setState({
            dataSource: this.state.dataSource.cloneWithRows(responseData.result),
            tempDataSource: responseData.result
          });

2.在点击的时候执行数据处理

_xxxxxxAction(item) {
    var array = this.state.tempDataSource.slice()
    var index = array.indexOf(item)
    array[index] = {
      isSelected: true
    };
    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(array),
      tempDataSource: array
    });
  }

Answer 4

楼主解决了吗？我也碰到这个问题了。

Answer 5

我现在是 移除一个item但是没有刷新 怎么办呢？