React-Native：ListView選中時突出顯示的行

我想創建一個ListView，當一行被選中時，該行被高亮顯示，直到它被再次選中。我一直在使用來自reac-native documentation 和各種其他教程的ListView示例，但我沒有收到任何地方。React-Native：ListView選中時突出顯示的行

一個工作的例子，甚至我應該使用的方法來指向我在正確的方向將不勝感激。

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

來源

2016-07-15 Larney

你試過構建這個了嗎？ – rmevans9

是的，我有。我正在從文檔中的例子開始工作。我不確定要調用哪種方法，例如：TouchableWithoutFeedback，TouchableOpacity，TouchableHighlight。我覺得文件上的解釋不清楚，也沒有幫助。 – Larney

TouchableWithoutFeedback - 當你這樣做的時候可以觸摸但不會改變其外觀的東西。 TouchableOpacity - 觸摸時降低視圖的不透明度。 TouchableHighlight - 觸摸時提高視圖的亮度。 – rmevans9

您可以使用underlayTouchableHighlight屬性反應原生組件。

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

輸出

來源

2017-01-04 05:49:27

這是行不通的。在新聞事件甚至沒有觸發。 – Lini

React-Native：ListView選中時突出顯示的行

回答

相關問題