React NativeのTouchableOpacityからonPressを一度更新するにはどうすればよいですか？

Question

私は2列の項目で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内のビューを再レンダリング更新されていませんか？また、それぞれの「不透明度」と「選択された」状態で、個々のアイテムでどのように行うことができますか？

** 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

私はあなたが選択状態に設定されていない、あなたが意図していると思います。

上記のコードでは、選択した行だけでなく、アプリケーション全体の状態です。 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