React-Native: ListView hebt die Zeile hervor, wenn ausgewählt - react-native, react-native-android, react-native-listview

Ich möchte eine ListView erstellen, mit der die Zeile bei Auswahl einer Zeile hervorgehoben wird, bis sie erneut ausgewählt wird. Ich habe mit ListView Beispiel aus dem gearbeitet reakative Dokumentation und verschiedene andere Tutorials, aber ich bekomme keine wo.

Ein Arbeitsbeispiel oder sogar die Methoden, die ich verwenden sollte, um mich in die richtige Richtung zu weisen, wäre sehr dankbar.

Ich bin neu bei React-Native, wenn es nicht schon offensichtlich ist.

Antworten:

Sie können verwenden underlay Eigentum von TouchableHighlight reaktiver Bestandteil.

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

Ausgabe