使用AND逻辑反应本机三元条件

Question

我在视图容器中有一堆图像，可以拖放图像。最初，所有图像都清晰可见。当我拖动图像时，其他图像应处于模糊状态。放下图像后，所有图像都应再次清晰可见。

该代码分别适用于每种情况：

但是当我执行AND时，所有图像都清晰可见，我需要模糊未选择的图像：

状态值更改时，此代码不起作用。

this.state.selectedItem != this.props.item && this.state.selectedItem !=null? new Animated.Value(0.2) : new Animated.Value(1)

完整代码：

class Draggable extends Component {

  constructor(props) {
    super(props);

    this.state = {
      showDraggable: true,
      selectedItem: null,
      pan: new Animated.ValueXY()
    };
  }

  componentWillMount() {
    this._val = { x:0, y:0 }
    this.state.pan.addListener((value) => this._val = value);

    this.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: (e, gesture) => true,
        onPanResponderGrant: (e, gesture) => {
          this.state.pan.setOffset({
            x: this._val.x,
            y: this._val.y
          })
          this.state.pan.setValue({ x:0, y:0})
          this.setState({selectedItem: this.props.item})
        },
        onPanResponderMove: Animated.event([
          null, { dx: this.state.pan.x, dy: this.state.pan.y }
        ]),
        onPanResponderRelease: (e, gesture) => {
          console.log("this.state.selectedItem = " + this.state.selectedItem);
          this.setState({selectedItem: null})
        },
      });
  }


  render() {
    return (
      <View pointerEvents="auto" style={{ width: "50%"}}>
        {this.renderDraggable()}
      </View>
    );
  }

  renderDraggable() {
    const {selectedItem} = this.state;
    const panStyle = {
      transform: this.state.pan.getTranslateTransform()
    }

    if (this.state.showDraggable) {
      return (
        <Animated.View key={this.props.keyProp}
          {...this.panResponder.panHandlers}
          style={[panStyle, {opacity: this.state.selectedItem != this.props.item && this.state.selectedItem !=null? new Animated.Value(0.2) : new Animated.Value(1), position: 'absolute'}]}
        >
          <FastImage source={{uri: this.props.item}} style= {styles.itemsInSet}/>
        </Animated.View>
      );
    }
  }
}

Draggable组件在这里被调用：

<View style={styles.imageContainerView}>
  {this.state.items.map((item) => {
    return <Draggable key={item.id} keyProp={item.id} item={item.uri}/> 
  })}
</View>