相同的onpress功能目标也是其他TouchableHighlights

Question

我是React-native的新手，所以我想弄清楚基础知识。

当我尝试使用下面的代码定位TouchableHighlight时，其他TouchableHighlights也会在同一个视图中触发。

    <TouchableHighlight underlayColor='none'
        onPress={() => {}}
        style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
        onHideUnderlay={this._onHideUnderlay.bind(this)}
        onShowUnderlay={this._onShowUnderlay.bind(this)}>

      <Animated.Image 
        activeOpacity={0.5}
        style={smiley.container} 

        source={require('../assets/images/smileys/042-happy-8.png')} />
      </TouchableHighlight  >

那么有没有办法只针对一个TouchableHighlight而不触发其他人？

完整代码如下所示：

//React dependencies
import React, { Component } from 'react'
import { View,  Text , Animated, Easing, TouchableHighlight  } from 'react- native'

//Components
import { AddMoodButton } from '../components'

//Styles
import { grid, addButton, smiley, text } from '../styles'


export class MoodScreen extends Component{
constructor(props) {
super(props);
this.state = {
  pressStatus: false 
};
//this.animatedValue = new Animated.Value(0);
}

_onHideUnderlay(){
this.setState({ pressStatus: false });
}
_onShowUnderlay(){
this.setState({ pressStatus: true });
}

render() {

return (
    <View style={grid.containerMoodScreen}>
    <Text style={text.header}>How are you feeling?</Text>
      <View style={grid.smiley}>

          <TouchableHighlight underlayColor='none'
            onPress={() => {}}
            style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
            onHideUnderlay={this._onHideUnderlay.bind(this)}
            onShowUnderlay={this._onShowUnderlay.bind(this)}>

          <Animated.Image 
            activeOpacity={0.5}
            style={smiley.container} 

            source={require('../assets/images/smileys/042-happy-8.png')} />
          </TouchableHighlight  >


        <TouchableHighlight underlayColor='none'
          onPress={() => {}}
          style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
          onHideUnderlay={this._onHideUnderlay.bind(this)}
          onShowUnderlay={this._onShowUnderlay.bind(this)}>
        <Animated.Image 
          activeOpacity={0.5}
          style={smiley.container} 

        source={require('../assets/images/smileys/033-angry-4.png')} />
        </TouchableHighlight  >

        <TouchableHighlight underlayColor='none'
          onPress={() => {}}
          style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
          onHideUnderlay={this._onHideUnderlay.bind(this)}
          onShowUnderlay={this._onShowUnderlay.bind(this)}>
        <Animated.Image 
          activeOpacity={0.5}
          style={smiley.container} 

        source={require('../assets/images/smileys/045-shocked-3.png')}/>
        </TouchableHighlight  >

        <TouchableHighlight underlayColor='none'
          onPress={() => {}}
          style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
          onHideUnderlay={this._onHideUnderlay.bind(this)}
          onShowUnderlay={this._onShowUnderlay.bind(this)}>
        <Animated.Image 
          activeOpacity={0.5}
          style={smiley.container} 

        source={require('../assets/images/smileys/063-sad-2.png')} />
        </TouchableHighlight  >

        <TouchableHighlight underlayColor='none'
          onPress={() => {}}
          style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
          onHideUnderlay={this._onHideUnderlay.bind(this)}
          onShowUnderlay={this._onShowUnderlay.bind(this)}>
        <Animated.Image 
          activeOpacity={0.5}
          style={smiley.container} 

        source={require('../assets/images/smileys/088-thinking.png')} />
        </TouchableHighlight  >

        <TouchableHighlight underlayColor='none'
          onPress={() => {}}
          style={[this.state.pressStatus ? smiley.containerButton : smiley.container]}
          onHideUnderlay={this._onHideUnderlay.bind(this)}
          onShowUnderlay={this._onShowUnderlay.bind(this)}>
        <Animated.Image 
          activeOpacity={0.5}
          style={smiley.container} 

        source={require('../assets/images/smileys/077-sad-1.png')} />
        </TouchableHighlight  >

      </View>
      <View style={addButton.bottom}>
        <AddMoodButton />
      </View>
    </View>
);

} }

Answer 1

_onHideUnderlay() {
    this.setState({ pressStatus: false });
  }
  _onShowUnderlay() {
    this.setState({ pressStatus: true });
  }
.
.
.
.

onHideUnderlay={this._onHideUnderlay.bind(this)}
        onShowUnderlay={this._onShowUnderlay.bind(this)}>

所有TouchableHighlight都具有相同的变量。请分别设置变量名称。

如果将其设置为相同的变量，则只能看到相同的响应。

如果您有任何其他问题，请发表评论。