React-Native: Listlight выделить строку, когда выбрано

Question

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

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

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

Answer 1

Вы можете использовать underlay property of TouchableHighlight contact-native component.

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 

Выход