如何在React-Native中聚焦图片

Question

我有几张图片，并且onPress我想使拍打的图片更大（聚焦），使背景变暗，像这样不透明。

如果我要点击这张图片，我想做的差不多是同一件事，但要在移动设备上（本机）。

Answer 1

使用： -使用“动画组件”缩放动画，

示例：

state = {
 zoomImage: 1
}

zoomIn=()=>{
 Animated.timing(this.state.zoomImage, {
    toValue: 2,
    duration: 2000,
    userNativeDriver: true
 })
}


render():

const animatedStyle = {
 transform: [
  {
   scale: this.state.zoomImage
  }
 ]
}


<TouchableOpacity onPress={() => this.zoomIn}>
 <Image style={animatedStyle}/>
</TouchableOpacity>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

引用：https://medium.com/react-native-training/react-native-animations-using-the-animated-api-ebe8e0669fae

Answer 2

我认为您需要从中心而不是从左上方缩放图像。您可以使用这种方法，这是为此的笔：Codepen Link

class Profile extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      height: '100%',
      width: '100%',
      flag: 0
    };
  }

  render() {

    var { pic } = this.props;

    return (
      <div>
          <img src={pic} id="myImage" height={this.state.height} width={this.state.width} onClick={this.zoomHandler.bind(this)}/>
      </div>  
    );
  }
  zoomHandler()
  {
      if(this.state.flag === 0)
      {
          document.getElementById("myImage").style.transform = "scale(2,2)";
          this.setState({flag: 1});
      }
      else
      {
          document.getElementById("myImage").style.transform = "scale(1,1)";
          this.setState({flag: 0});
      }
  }
}

React.render(
  <Profile 
    pic="https://www.diariogol.com/uploads/s1/55/38/91/7/messi-leo-getafe-camp-nou_15_970x597.jpeg" />, 
    document.getElementById('app')
);

我用状态来表示身高和体重，也可以用于缩放效果。