Question

我想创建一个ListView，当选择行时，该行会被高亮显示，直到再次被选中。我一直在使用reac-native documentation中的ListView示例和各种其他教程，但我没有在哪里。

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

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

Answer 1

您可以使用underlay react-native组件的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

<强>输出

Answer 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',
        },
    });

React-Native：选中时ListView高亮显示行

2 个答案: