Question

在Instagram之类的应用中，您可以向左平移（在主屏幕上）以显示摄像机VC。平移时相机会进来。如何在React Native中实现呢？

Answer 1

您可以使用PanResponder收听平移事件，并导航到所需的屏幕或执行操作或类似操作以打开相机。

PanResponder

PanResponder将多个触摸调整为一个手势。它   使单点触摸手势具有额外触摸的弹性，并且可以   用于识别简单的多点触摸手势。

默认情况下，PanResponder拥有一个InteractionManager句柄   阻止长时间运行的JS事件中断活动手势。

它提供了所提供的响应程序处理程序的可预测包装   由gesture responder system。对于每个处理程序，它提供一个   新的手势状态对象与本机事件对象一起：
onPanResponderMove: (event, gestureState) => {}

Answer 2

您可以使用PanResponder的{{1}}和onPanResponderGrant事件来检查移动是否为左摇摄，然后使用react-native-camera或Expo的{{3 }} / Camera模块。

正在运行的演示：ImagePicker

onPanResponderRelease

Answer 3

最简单的方法是渲染一个视图 offscreen ，该视图的尺寸与当前视图的尺寸相同。大概使用Dimensions.get('window')，但您的用例可能会略有不同。

将其设置为屏幕外的关键是将其绝对定位，并将left的值设置为屏幕宽度的负值。但是，要完成转换，您希望将此值设为Animated.Value初始化为我提到的负屏幕宽度。

最后，正如其他人所建议的那样，您需要在您最初可见的视图上实现一个PanResponder，这将更改相机在绝对定位的视图上的left样式的值。您希望该摄像机视图已经处于活动状态，以便您的过渡看起来很平滑。

这是一些伪代码，如果这是您要解决的问题的路径，我可以提供更完善的解决方案

// in constructor
this.state = {
  leftValue: new Animated.Value(-screenWidth)
}

// in render
<View style={styles.initialView} />
<Animated.View
  style={{
    position: 'absolute',
    top: 0,
    left: this.state.leftValue,
    width: screenWidth,
    height: screenHeight,
  }}
>
  {cameraImplementation}
</Animated.View>

我该如何在React Native中对摄影机进行平移？

3 个答案:

PanResponder