Question

我目前有3个TouchableHighlight按钮，我想一次只突出显示其中之一，并存储它们的状态。

状态：

state = {
    selected: null,
  };

handleClick功能

 _handleClick(flag) {
    if (flag == 1) {
      this.setState({selected: true});
    }
  }

三个可触摸的亮点之一

 <TouchableHighlight
   style={styles.container}
   onPress={() => this._handleClick('any flag')}
   underlayColor="red">
   <View>
      <Text>
         Test
      </Text>
   </View>
 </TouchableHighlight>

到目前为止，这仅突出显示了我试图点击的当前按钮约一秒钟，并且底色变了。

有人可以帮我吗？谢谢

Answer 1

您可以尝试使用此功能：

状态：

geopoint = field['location']

print(geopoint.getLatitude()) 
print(geopoint.getLongitude())

handleClick函数：

state = {
    selected: null,
    SelectedButton: ''
 };

可触摸：

 _handleClick(flag, button) {
    if (flag == 1) {
      this.setState({selected: true});
    }
    this.setState({SelectedButton: button})
  }

含义：

按下可触摸对象时，“ handleClick”功能不仅会保存按钮的状态，还会保存最后按下的按钮。然后在可触摸内部视图的样式上，这就是魔术：

 <TouchableHighlight
   style={styles.container}
   onPress={() => this._handleClick('any flag', '1')}
   underlayColor="red">
   <View style={{backgroundColor: (this.state.SelectedButton === '1' ? 'red' : 'green')}}>
      <Text>
         Test
      </Text>
   </View>
 </TouchableHighlight>

表示：“如果最后选择的按钮等于按钮的常规ID，则视图的颜色将为红色，否则，颜色将为绿色”

您可以将其设为其他可触摸对象，其中一个与您的“ ID”（1、2、3等）

更新：

如果每个按钮都有唯一的值，则可以尝试使用：

状态：

   <View`style={{backgroundColor: (this.state.SelectedButton === '1' ? 'red' : 'green')}}>

handleClick函数：

state = {
    selected: null,
    value: ''
 };

可触摸：

 _handleClick(flag, button) {
    if (flag == 1) {
      this.setState({selected: true});
    }
    this.setState({value: 'flag'})
  }

一次仅突出显示一个按钮（反应本机）

1 个答案: