Javascript React Native-如何更改视图的样式和图像

我有三个TouchableHighlight元素，它们包裹着三个视图（彼此相邻对齐）。Onpress我想更改视图的样式（背景色）和图像（按下的视图将变为活动视图）

• 活动视图-背景色应变为“红色”，图像源应为“arrow win active.png”

• 其他两种观点保持不变

最好的方法是什么

以下是一个屏幕截图：

以下是我目前的代码：

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

从“React”导入React
进口{
看法
ListView，
滚动视图，
样式表，
形象,，
触控高光，
}从“反应本机”
常量changeStyle=（）=>{
console.log（'change style'）
}
const appView=（游戏，日期）=>
changeStyle（）}style={{{flex:1}}>
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#e1e1”
},
步骤：{
背景颜色：“#ffffff”，
边界半径：4，
边线宽度：5，
弹性：1，
边缘左：10，
marginRight:10，
marginBottom:10，
paddingLeft:15，
paddingRight:10，
paddingTop:15，
填充底部：15，
阴影偏移：{
宽度：0，
身高：2，
},
阴影半径：2，
阴影不透明度：0.2，
阴影颜色：“黑色”，
textAlign:'中心'，
},
标题：{
textAlign:'中心'，
fontWeight:'粗体'，
尺寸：15，
颜色：'#333333'，
},
分拣箱：{
弹性：1，
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“居中”，
},
包装纸：{
弹性：1，
flexDirection:'行'，
为内容辩护：“周围的空间”，
对齐项目：“居中”，
玛金托普：10，
},
圆圈：{
身高：60，
边界半径：30，
宽度：60，
背景颜色：“#eeeeee”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
阿罗温：{
宽度：34，
身高：28，
},
箭头绘制：{
宽度：18，
身高：8，
},
})
导出默认appView

您必须将

AppView

更改为基于类的组件，因为您必须访问

状态

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

import-React。{Component}来自“react”
进口{
看法
ListView，
滚动视图，
样式表，
形象,，
触控高光，
}从“反应本机”
类AppView扩展组件{
状态={
iPlayer1ButtonActive:false，
isDrawButtonActive:false，
iPlayer2ButtonActive:false，
}
activateButton=按钮激活=>{
const newState=Object.assign(
{}, 
{
iPlayer1ButtonActive:false，
isDrawButtonActive:false，
iPlayer2ButtonActive:false，
}, 
{[buttonToActivate]：true}，
)
this.setState（newState）；
}
render（）{
const{isPlayer1ButtonActive，isDrawButtonActive，isPlayer2ButtonActive}=this.state
返回(
activateButton（'isplayer1buttonActivity'）}样式={{{flex:1}}>
activateButton（'isDrawButtonActive'）}样式={{{flex:1}}>
activateButton（'isPlayer2ButtonActivity'）}样式={{{flex:1}}>
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#e1e1”
},
步骤：{
背景颜色：“#ffffff”，
边界半径：4，
边线宽度：5，
弹性：1，
边缘左：10，
marginRight:10，
marginBottom:10，
paddingLeft:15，
paddingRight:10，
paddingTop:15，
填充底部：15，
阴影偏移：{
宽度：0，
身高：2，
},
阴影半径：2，
阴影不透明度：0.2，
阴影颜色：“黑色”，
textAlign:'中心'，
},
标题：{
textAlign:'中心'，
fontWeight:'粗体'，
尺寸：15，
颜色：'#333333'，
},
分拣箱：{
弹性：1，
flexDirection:'行'，
justifyContent:'之间的空间'，
对齐项目：“居中”，
},
包装纸：{
弹性：1，
flexDirection:'行'，
为内容辩护：“周围的空间”，
对齐项目：“居中”，
玛金托普：10，
},
圆圈：{
身高：60，
边界半径：30，
宽度：60，
背景颜色：“#eeeeee”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
循环式：{
背景颜色：“红色”，
},
阿罗温：{
宽度：34，
身高：28，
},
箭头绘制：{
宽度：18，
身高：8，
},
})
导出默认AppView

您能告诉我您想用什么样式替换吗？您想用什么图像替换吗？现在还不清楚这三张图片是一起出现还是在印刷机上旋转？当然，我刚刚更新了我的问题，提供了更多关于风格的细节。任何按下的视图都将变为活动视图，其他两个视图将变为非活动视图。谢谢，这是有意义的。最后一个问题-您是否认为使用redux更好？我不会将redux用于像这样的小事情：）您还想添加什么吗？好的。谢谢你的帮助；）