React Native - 如何更改視圖的樣式和圖像onPress

Question

我有三個TouchableHighlight元素包裝三個視圖（彼此對齊）。 Onpress我想改變風格（backgroundColor）和視圖的圖像（按下的視圖將變爲活動狀態）。

• 活動視圖 - 的backgroundColor <View style={styles.circle}>應該成爲「紅」，圖像源應該是「箭頭雙贏active.png」 <Image source={require('../images/arrow-win.png')} style={styles.arrowWin}></Image>
• 其他兩種看法仍然不變

會是什麼最好的辦法呢？

下面是截圖：

這裏是我到目前爲止的代碼：

import React from 'react' 
import { 
    View, 
    ListView, 
    ScrollView, 
    StyleSheet, 
    Image, 
    TouchableHighlight, 
} from 'react-native' 

const changeStyle =() => { 
    console.log('change style') 
} 

const appView = (game, date) => 
<ScrollView style={styles.container}> 
    <View style={styles.step}> 
     <View style={{flex:1}}> 
      <View style={styles.pickContainer}> 
       <TouchableHighlight onPress={() => changeStyle()} style={{flex:1}}> 
        <View style={styles.pickWrapper}> 
         <View style={styles.circle}> 
          <Image source={require('../images/arrow-win.png')} style={styles.arrowWin}></Image> 
         </View> 
        </View> 
       </TouchableHighlight> 

       <TouchableHighlight style={{flex:1}}> 
        <View style={styles.pickWrapper}> 
         <View style={styles.circle}> 
          <Image source={require('../images/arrow-draw.png')} style={styles.arrowDraw}></Image> 
         </View> 
        </View> 
       </TouchableHighlight> 

       <TouchableHighlight style={{flex:1}}> 
        <View style={styles.pickWrapper}> 
         <View style={styles.circle}> 
          <Image source={require('../images/arrow-win.png')} style={styles.arrowWin}></Image> 
         </View> 
        </View> 
       </TouchableHighlight> 
      </View> 
     </View> 
    </View> 
</ScrollView> 

const styles = StyleSheet.create({ 
container: { 
    flex: 1, 
    backgroundColor: '#e1e1e1' 
}, 
step: { 
    backgroundColor: '#ffffff', 
    borderRadius: 4, 
    borderLeftWidth: 5, 
    flex: 1, 
    marginLeft: 10, 
    marginRight: 10, 
    marginBottom: 10, 
    paddingLeft: 15, 
    paddingRight: 10, 
    paddingTop: 15, 
    paddingBottom: 15, 
    shadowOffset: { 
     width: 0, 
     height: 2, 
    }, 
    shadowRadius: 2, 
    shadowOpacity: 0.2, 
    shadowColor: 'black', 
    textAlign: 'center', 
}, 
heading: { 
    textAlign: 'center', 
    fontWeight: 'bold', 
    fontSize: 15, 
    color: '#333333', 
}, 
pickContainer: { 
    flex:1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
}, 
pickWrapper: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignItems: 'center', 
    marginTop: 10, 
}, 
circle: { 
    height: 60, 
    borderRadius: 30, 
    width: 60, 
    backgroundColor: '#eeeeee', 
    alignItems: 'center', 
    justifyContent: 'center', 
}, 
arrowWin: { 
    width: 34, 
    height: 28, 
}, 
arrowDraw: { 
    width: 18, 
    height: 8, 
}, 
}) 

export default appView 

Answer 1

你必須改變AppView基於類的部件，因爲你必須訪問state。

import React. {Component} from 'react' 
import { 
    View, 
    ListView, 
    ScrollView, 
    StyleSheet, 
    Image, 
    TouchableHighlight, 
} from 'react-native' 

class AppView extends Component { 
    state = { 
    isPlayer1ButtonActive: false, 
    isDrawButtonActive: false, 
    isPlayer2ButtonActive: false, 
    } 

    activateButton = buttonToActivate => { 
    const newState = Object.assign(
     {}, 
     { 
     isPlayer1ButtonActive: false, 
     isDrawButtonActive: false, 
     isPlayer2ButtonActive: false, 
     }, 
     {[buttonToActivate]: true}, 
    ) 
    this.setState(newState); 
    } 

    render() { 
    const {isPlayer1ButtonActive, isDrawButtonActive, isPlayer2ButtonActive} = this.state 

    return (
     <ScrollView style={styles.container}> 
     <View style={styles.step}> 
      <View style={{flex:1}}> 
      <View style={styles.pickContainer}> 
       <TouchableHighlight onPress={() => activateButton('isPlayer1ButtonActive')} style={{flex:1}}> 
       <View style={styles.pickWrapper}> 
        <View style={[styles.circle, isPlayer1ButtonActive && styles.circleActive]}> 
        <Image 
         source={isPlayer1ButtonActive ? require('../images/arrow-win-active.png') : require('../images/arrow-win.png')} 
         style={styles.arrowWin} 
        /> 
        </View> 
       </View> 
       </TouchableHighlight> 

       <TouchableHighlight onPress={() => activateButton('isDrawButtonActive')} style={{flex:1}}> 
       <View style={styles.pickWrapper}> 
        <View style={[styles.circle, isDrawButtonActive && styles.circleActive]}> 
        <Image 
         source={isDrawButtonActive ? require('../images/arrow-draw-active.png') : require('../images/arrow-draw.png')} 
         style={styles.arrowDraw} 
        /> 
        </View> 
       </View> 
       </TouchableHighlight> 

       <TouchableHighlight onPress={() => activateButton('isPlayer2ButtonActive')} style={{flex:1}}> 
       <View style={styles.pickWrapper}> 
        <View style={[styles.circle, isPlayer2ButtonActive && styles.circleActive]}> 
        <Image 
         source={isPlayer2ButtonActive ? require('../images/arrow-win-active.png') : require('../images/arrow-win.png')} 
         style={styles.arrowWin} 
        /> 
        </View> 
       </View> 
       </TouchableHighlight> 
      </View> 
      </View> 
     </View> 
     </ScrollView> 
    ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#e1e1e1' 
    }, 
    step: { 
    backgroundColor: '#ffffff', 
    borderRadius: 4, 
    borderLeftWidth: 5, 
    flex: 1, 
    marginLeft: 10, 
    marginRight: 10, 
    marginBottom: 10, 
    paddingLeft: 15, 
    paddingRight: 10, 
    paddingTop: 15, 
    paddingBottom: 15, 
    shadowOffset: { 
     width: 0, 
     height: 2, 
    }, 
    shadowRadius: 2, 
    shadowOpacity: 0.2, 
    shadowColor: 'black', 
    textAlign: 'center', 
    }, 
    heading: { 
    textAlign: 'center', 
    fontWeight: 'bold', 
    fontSize: 15, 
    color: '#333333', 
    }, 
    pickContainer: { 
    flex:1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    }, 
    pickWrapper: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignItems: 'center', 
    marginTop: 10, 
    }, 
    circle: { 
    height: 60, 
    borderRadius: 30, 
    width: 60, 
    backgroundColor: '#eeeeee', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    circleActive: { 
    backgroundColor: 'red', 
    }, 
    arrowWin: { 
    width: 34, 
    height: 28, 
    }, 
    arrowDraw: { 
    width: 18, 
    height: 8, 
    }, 
}) 

export default AppView