React-Native: выделенная строка ListView при выборе

Я хочу создать ListView, который при выборе строки подсвечивается до тех пор, пока она не будет выбрана снова. Я работал с примером ListView из документации для reac-native и различных другие учебники, но я не получаю ни куда.

Буду очень признателен за рабочий пример или даже за методы, которые я должен использовать, чтобы указать мне правильное направление.

Я новичок в React-Native, если это еще не очевидно.


react-native react-native-android react-native-listview
person Larney    schedule 15.07.2016    source источник
comment
Вы уже пробовали это построить?   -  person rmevans9    schedule 15.07.2016
comment
Да. Я работаю на примере из документации. Я не уверен, какие методы вызывать, например: TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight. Я считаю объяснения в документации неясными и бесполезными.   -  person Larney    schedule 15.07.2016
comment
TouchableWithoutFeedback - что-то, что может касаться, но не меняет своего внешнего вида, когда вы это делаете. TouchableOpacity - Уменьшите непрозрачность вида при касании. TouchableHighlight - Увеличение яркости изображения при касании.   -  person rmevans9    schedule 15.07.2016
comment
TouchableHighlight звучит как то, что мне нужно, за исключением того, что мне нужно, чтобы строка оставалась выделенной, пока она не будет выбрана снова.   -  person Larney    schedule 15.07.2016
comment
Подсказка, вам нужен массив для хранения нажатых индексов строк :)   -  person Train    schedule 15.07.2016
comment
См. stackoverflow.com/questions/38388623/   -  person rmevans9    schedule 18.07.2016
comment
Это очень просто, установите состояние для просмотра и готово.   -  person Hoàng Vũ Anh    schedule 21.09.2018

Ответы (2)


arrow_upward
0
arrow_downward

вы можете использовать свойство underlay компонента TouchableHighlight response-native.

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

Вывод

введите здесь описание изображения

person Ashok R    schedule 04.01.2017
comment
Это не работает. на пресс-событие даже не сработало. - person Shalini; 25.05.2017

arrow_upward
0
arrow_downward

У меня это сработало, когда я добавил 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',
        },
    });
person Raghunath Viswanatha    schedule 21.09.2018