如何更改从数组动态创建的 TouchableOpacity 的背景颜色？

Question

我想更改 TouchableOpacity 的 backgroundColor 和 BorderColor。我知道我可以使用状态在按下时更改 TouchableOpacity BGColor，但是 TouchableOpacity 是从 arrayList 动态创建的，我只想更改按下的 touchableOpacity 的 backgroundColor 和 BorderCorlor。

这是我创建按钮的代码：

 var sizeOptions = [];
 for (var i = 0; i < product.Items[0].Items.length; i++) {
   for (var j = 0; j <  product.Items[0].Items[i].SKUOptions.length; j++) {
     if (product.Items[0].Items[i].SKUOptions[j].Alias == 'Tamanho') {
       var sizeTitle = product.Items[0].Items[i].SKUOptions[j].Title;
       sizeOptions.push(
          <TouchableOpacity style={{marginLeft:20, height:40, width:40, borderRadius:1, borderWidth:1, borderStyle: 'solid', borderColor:'#000', backgroundColor:'#fff'}} key = {i} onPress={() => this.selectSize(sizeTitle)}>
            <Text style={[{marginTop:10, width:40, height:40, textAlign: 'center'}]}> {sizeTitle} </Text>
        </TouchableOpacity>
     )
     }
   }
 }

return (
  <ScrollView contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}} horizontal={true} style={{marginTop:15, marginLeft: 15}}>
  { sizeOptions }
  </ScrollView>
);

此代码已经可以显示创建的按钮，我只需要更改按下时的颜色。

Answer 1

我会为 TouchablOpacity 创建一个单独的 class 组件并在那里实现 onPress 逻辑，然后在您的数组中使用新创建的组件，如下所示：

 var sizeOptions = [];
 for (var i = 0; i < product.Items[0].Items.length; i++) {
   for (var j = 0; j <  product.Items[0].Items[i].SKUOptions.length; j++) {
     if (product.Items[0].Items[i].SKUOptions[j].Alias == 'Tamanho') {
       var sizeTitle = product.Items[0].Items[i].SKUOptions[j].Title;
       sizeOptions.push(
          <NewComponent textToDispaly = {sizeTitle}/>
     )
     }
   }
 }

Answer 2

state 对象可以有一个名为 touchableOpacityIndexPressed 的属性，它在开头用 -1 初始化。

constructor(props) {
  super(props);
  this.state = { touchableOpacityIndexPressed: -1 }
  ...
}

当touchable被push到数组中时，可以进行如下操作：

<TouchableOpacity style={{marginLeft:20, height:40, width:40, borderRadius:1, borderWidth:1, borderStyle: 'solid', borderColor: this.state.touchableOpacityIndexPressed === (i + j) ? 'red' : '#000', backgroundColor: this.state.touchableOpacityIndexPressed === (i + j) ? 'blue' :'#fff'}} key = {i} onPress={() => this.selectSize(sizeTitle, (i + j)}>

确保在 selectSize 方法中为 touchableOpacityIndexPressed 属性设置正确的状态，在我的示例中我将其设置为 (i + j).

如何更改从数组动态创建的 TouchableOpacity 的背景颜色？

How to change backgroundColor of a TouchableOpacity created dynamically from array?

react-native

touchableopacity