Как я могу обновить состояние после нажатия на кнопку TouchableOpacity в React Native?

Question

Итак, я представляю ListView с двумя столбцами элементов. Следующая функция отображает строки, renderRow (rowData):

Для каждого элемента, если щелкнуть, я хочу, чтобы он был изменен на непрозрачность 0,5, и если щелкнуть его снова, попробуйте вернуться, чтобы очистить непрозрачность, поэтому то, что я думал, устанавливает его непрозрачность 1,0.

Я попытался следующие, но по какой-то причине непрозрачности не обновляется:

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 
     }) 
    } 
    } 

Почему не непрозрачности обновляется один раз нажал и перерисовка вид внутри TouchableHighlight? Также как я могу сделать это с помощью отдельного элемента, с каждыми «непрозрачностью» и «выбранными» состояниями?

** ПОЛНЫЙ КОД

'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

Я думаю, что вы установите выбранное состояние не вы хотели.

В приведенном выше коде выбранное состояние для всего приложения - не только для выбранной строки. Чтобы выбрать одну строку, вы должны сохранить выбранное состояние для каждого элемента. Для более чистого кода рекомендуется иметь еще один модуль для элемента и сохранять его там, а не в родительском модуле.

Код:

'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