react-native - React-Native：选择时 ListView 突出显示行

Question

我想创建一个listView，即选择一行时，将一行重新选择，直到再次选择。我一直在使用reac-native 文档 和其他各种教程中的 ListView 示例，但我无处可去。

一个工作示例甚至是我应该用来为我指明正确方向的方法将不胜感激。

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

Answer 1

一旦我在类前面添加了导出默认值并删除了底部的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',
        },
    });

Answer 2

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

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

输出