Wie kann ich den Status on onPress per TouchableOpacity in React Native aktualisieren?

Question

Also Rendern ich eine ListView mit zwei Spalten von Elementen. Die folgende Funktion rendert die Zeilen renderRow (rowData):

Wenn ich auf jedes Objekt klicke, möchte ich, dass es auf eine Opazität von 0,5 geändert wird. Wenn es erneut angeklickt wird, soll es zurück sein, um die Deckkraft aufzuheben was ich dachte ist, es auf eine Opazität von 1.0 zu setzen.

habe ich versucht, die folgenden, aber aus irgendeinem Grund wird die Opazität nicht aktualisiert:

constructor(props){ 
    super(props); 

    this.state = { 
     opacity: 1.0, 
     selected: false, 
    } 
    } 

    renderRow(rowData){ 
    return (
      <View style={styles.item}> 
      <TouchableHighlight onPress={()=>this._selected() underlayColor='transparent'}> 
       <View style={{opacity:this.state.opacity}}> 
       <Text>{rowData.firstName}</Text> 
       <Text>{rowData.lastName}</Text> 
       </View> 
      </TouchableHighlight> 
      </View> 
    ) 
    } 

    _selected(){ 
    if(this.state.selected){ 
     console.log('ITEM HAS BEEN UNSELECTED') 
     this.setState({ 
     opacity: 1.0, 
     selected: false 
     }) 
    }else{ 
     console.log('ITEM HAS BEEN SELECTED') 
     this.setState({ 
     opacity: 0.5, 
     selected: true 
     }) 
    } 
    } 

Warum ist nicht die Opazität und rerendering innerhalb der TouchableHighlight die Ansicht einmal geklickt aktualisiert werden? Wie kann ich das auch mit einzelnen Items machen, mit den Zuständen "Opacity" und "Selected"?

** FULL CODE

'use strict'; 

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    ListView, 
    Image, 
    TouchableHighlight, 
    TouchableOpacity 
} from 'react-native'; 

class Interest extends Component { 
    constructor(props){ 
    super(props); 

    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.state = { 
     selected: false, 
     dataSource: ds.cloneWithRows([ 
     {firstName: 'Johnny', lastName: 'Boy'}, 
     {firstName: 'Shawn', lastName: 'Ke'}, 
     {firstName: 'An', lastName: 'Twon'} 
    }; 
    } 

    renderRow(rowData){ 
    return (
      <View style={this.state.selected ? styles.transItem : styles.opacItem}> 
      <TouchableHighlight 
       onPress={() => { this.setState({selected: !this.state.selected})}} underlayColor='transparent'> 
       <View> 
       <Text>{rowData.firstName}</Text> 
       <Text>{rowData.lastName}</Text> 
       </View> 
      </TouchableHighlight> 
      </View> 
    ) 
    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={this.renderRow.bind(this)} 
     /> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1 
    }, 
    list: { 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    }, 
    opacItem: { 
    margin: 15, 
    width: 155, 
    height: 175, 
    opacity: 1.0 
    }, 
    transItem: { 
    margin: 15, 
    width: 155, 
    height: 175, 
    opacity: 0.5 
    } 
}); 

export default Interest 

Answer 1

Ich glaube, Sie stellen Sie den ausgewählten Zustand nicht sind Sie bestimmt.

Im obigen Code ist der ausgewählte Status ein Status für die gesamte App - nicht nur für eine ausgewählte Zeile. Um eine einzelne Zeile auszuwählen, sollten Sie für jedes Element einen ausgewählten Status beibehalten. Für saubereren Code wird empfohlen, ein anderes Modul für das Element zu verwenden und den Status dort und nicht im übergeordneten Modul beizubehalten.

Code:

'use strict'; 

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    ListView, 
    Image, 
    TouchableHighlight, 
    TouchableOpacity 
} from 'react-native'; 

class Interest extends Component { 
    constructor(){ 
    super(); 
    this._renderRow = this._renderRow.bind(this); 
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

    this.state = { 
     dataSource: ds.cloneWithRows([ 
     {firstName: 'Johnny', lastName: 'Boy'}, 
     {firstName: 'Shawn', lastName: 'Ke'}, 
     {firstName: 'An', lastName: 'Twon'} 
     ])}; 
    } 

    render() { 
     return (
     <View style={styles.container}> 
      <ListView 
      contentContainerStyle={styles.list} 
      dataSource={this.state.dataSource} 
      renderRow={this._renderRow} 
      /> 
     </View> 
    ); 
    } 

    _renderRow(rowData) { 
     return(
     <InterestItem rowData={rowData} />); 
    } 
    } 

    class InterestItem extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
     selected: false 
     } 
    } 

    render(){ 
     const { rowData } = this.props; 
     return (
     <View style={this.state.selected ? styles.transItem : styles.opacItem}> 
      <TouchableHighlight 
      onPress={() => { this.setState({selected: !this.state.selected})}} 
      underlayColor='transparent' 
      > 
      <View> 
       <Text>{rowData.firstName}</Text> 
       <Text>{rowData.lastName}</Text> 
      </View> 
      </TouchableHighlight> 
     </View> 
    ) 
    } 
    } 

    const styles = StyleSheet.create({ 
    container: { 
     flex: 1 
    }, 
    list: { 
     flexDirection: 'row', 
     flexWrap: 'wrap', 
    }, 
    opacItem: { 
     margin: 15, 
     width: 155, 
     height: 175, 
     opacity: 1.0 
    }, 
    transItem: { 
     margin: 15, 
     width: 155, 
     height: 175, 
     opacity: 0.5 
    } 
    }); 

    export default Interest