React-Native：选择时 ListView 突出显示行答案

【问题标题】：React-Native: ListView highlight row when selectedReact-Native：选择时 ListView 突出显示行
【发布时间】：2016-07-15 11:37:26
【问题描述】：

我想创建一个 ListView，当一行被选中时，该行被高亮显示，直到它再次被选中。我一直在使用来自reac-native documentation 的 ListView 示例和其他各种教程，但我没有得到任何地方。

非常感谢一个工作示例，甚至是我应该用来为我指明正确方向的方法。

如果还不是很明显，我是 React-Native 的新手。

【问题讨论】：

你尝试过构建它了吗？
是的，我有。我正在使用文档中的示例。我不确定要调用哪些方法，例如：TouchableWithoutFeedback、TouchableOpacity、TouchableHighlight。我发现文档中的解释不清楚且没有帮助。
TouchableWithoutFeedback - 可以触摸但不会改变外观的东西。 TouchableOpacity - 触摸时降低视图的不透明度。 TouchableHighlight - 触摸时提高视图的亮度。
TouchableHighlight 听起来像我需要的，除了我需要该行保持突出显示，直到它再次被选中。
提示，你需要一个数组来存储点击的行索引:)

标签： react-native react-native-android react-native-listview

【解决方案1】：

您可以使用 TouchableHighlight react-native 组件的 underlay 属性。

import React, { Component } from 'react';
import {
     StyleSheet,
     Text,
     View,
     ListView,
     TouchableHighlight
} from 'react-native';

class helloRN extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3', 'row 4', 'row 5', 'row 6', 'row 7', 'row 8', 'row 9', 'row 10']),
    };
  }

  _onPressButton() {
    console.log("On Press")
  }

  render() {
    return (
      <ListView style = {styles.container}
        dataSource={this.state.dataSource}
        renderRow={
          (rowData) => <TouchableHighlight style = {styles.rowStyle} underlayColor = '#008b8b' onPress = {this._onPressButton}>
                          <Text style = {styles.rowText}>{rowData}</Text>
                       </TouchableHighlight>
        }
      />
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#FFFFFF',
    },
    rowText: {
        fontSize: 20,
        textAlign: 'center',
        color: '#FFFFFF'
    },
    rowStyle: {
        backgroundColor: '#333333',
        flex: 1,
        height: 100,
        margin: 2,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

module.exports = helloRN

输出

【讨论】：

这不起作用。甚至没有触发新闻事件。

【解决方案2】：

一旦我在类前面添加 export default 并删除底部的 module.exports 语句，它就对我有用。代码如下所示。希望这对每个人都适用，就像对我一样。

    import React, { Component } from 'react';
    import {
        StyleSheet,
        Text,
        View,
        ListView,
        TouchableHighlight
    } from 'react-native';

    export default class helloRN extends Component {
    constructor() {
        super();
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
        dataSource: ds.cloneWithRows(['row 1', 'row 2', 'row 3', 'row 4', 'row 5', 'row 6', 'row 7', 'row 8', 'row 9', 'row 10']),
        };
    }

    _onPressButton() {
        console.log("On Press")
    }

    render() {
        return (
        <ListView style = {styles.container}
            dataSource={this.state.dataSource}
            renderRow={
            (rowData) => <TouchableHighlight style = {styles.rowStyle} underlayColor = '#008b8b' onPress = {this._onPressButton}>
                            <Text style = {styles.rowText}>{rowData}</Text>
                        </TouchableHighlight>
            }
        />
        );
    }
    }

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#FFFFFF',
        },
        rowText: {
            fontSize: 20,
            textAlign: 'center',
            color: '#FFFFFF'
        },
        rowStyle: {
            backgroundColor: '#333333',
            flex: 1,
            height: 100,
            margin: 2,
            justifyContent: 'center',
            alignItems: 'center',
        },
    });

【讨论】：