Question

我想编写一个简单的应用程序，其中对象在屏幕上移动，目标是点击它们。我在componentDidMount中加入了Animated API：

Animated.timing(
  this.state.fadeAnim,
  {
    toValue: 1,
    duration: 10000,
  }
).start();

然后我将以render方法在我的React组件上设置样式：

<TouchableHighlight onPress={this.setText} >
  <Animated.View style={{
    opacity: this.state.fadeAnim, // Binds directly
    transform: [{
      translateY: this.state.fadeAnim.interpolate({
        inputRange: [0, 1],
        outputRange: [500, 0]  // 0 : 150, 0.5 : 75, 1 : 0
      }),
    }],
  }}>
    <Image source={pic} style={{width: 193, height: 110, display: display}}/>
  </Animated.View>    
</TouchableHighlight>

问题是图像在移动时对抽头没有反应。当我轻按它的最终目的地时，它会执行此操作，但是在移动时它所处的位置。你们能帮我解决这个问题吗？也许React-Native并不是这类应用程序的最佳工具，我应该转向本机开发吗？

Answer 1

您完全可以使用react-native做到这一点。我建议使用<TouchableOpacity>而不是<TouchableHighlight>来避免在按下动画时出现深色背景。

另外，您应该将<TouchableOpacity>与动画一起包装，而不要反过来，否则按动画的最终位置也将触发事件。

这里是一个例子：

<Animated.View style={{
  opacity: this.state.fadeAnim, // Binds directly
  transform: [{
    translateY: this.state.fadeAnim.interpolate({
      inputRange: [0, 1],
      outputRange: [500, 0]  // 0 : 150, 0.5 : 75, 1 : 0
    }),
  }],
}}>
  <TouchableOpacity onPress={this.setText} >
    <Image source={pic} style={{width: 193, height: 110}}/>
  </TouchableOpacity>
</Animated.View>

您可以检查this snack是否有用。

Answer 2

首先，我们可以在此处使用本机驱动程序

Animated.timing(
  this.state.fadeAnim,
  {
    toValue: 1,
    duration: 10000,
    useNativeDriver: true
  }
).start();

应该将transform的样式赋予TouchableHighlight。问题是Image正在移动，但是按钮没有移动，因此不会触发onClick。

  <Animated.View style={{
    opacity: this.state.fadeAnim, // Binds directly
    transform: [{
      translateY: this.state.fadeAnim.interpolate({
        inputRange: [0, 1],
        outputRange: [500, 0]  // 0 : 150, 0.5 : 75, 1 : 0
      }),
    }],
  }}>
    <TouchableHighlight onPress={this.setText} >
      <Image source={pic} style={{width: 193, height: 110, display: display}}/>
    </TouchableHighlight>
  </Animated.View>

这应该有效。同样，对本机做出反应应该很好。

轻触移动的动画对象

2 个答案: