Ios 我如何在React Native中执行平移到摄影机？

在Instagram等应用程序中，您可以向左平移（在主屏幕上）以显示摄像头。当你摇摄的时候，相机进来了。如何在React Native中实现这一点？

您可以使用监听pan事件并导航到所需屏幕，或运行操作或类似操作以打开相机

应答器

PanResponder

将多个触摸协调为一个手势。信息技术 使单触手势对额外触摸具有弹性，并且可以 用于识别简单的多点触摸手势

默认情况下，

PanResponder

持有一个

InteractionManager

句柄 阻止长时间运行的JS事件中断活动手势

它为提供的响应程序处理程序提供了一个可预测的包装器 由。对于每个处理程序，它提供一个 本机事件对象旁边的新gestureState对象：

onPanResponderMove: (event, gestureState) => {}

---

您可以使用

PanResponder

的

onPanResponderGrant

和

onPanResponderRelease

事件检查移动是否为左平移，然后使用或Expo/模块打开相机

工作演示：

import React，{Component}来自'React'；
从“react native”导入{Text，PanResponder，Alert}；
从“expo”导入{ImagePicker，Permissions}；
导出默认类应用程序扩展组件{
panResponder=panResponder.create({
onStartShouldSetPanResponder:（）=>true，
onPanResponderGrant:e=>{
this.start=e.nativeEvent.pageX；
},
onPanResponderRelease:e=>{
如果（this.start-e.nativeEvent.pageX>100）{
我保证([
Permissions.askAsync（Permissions.CAMERA），
权限.askAsync（权限.CAMERA_ROLL），
]).然后（[{status:status1}，{status:status2}]）=>{
如果（状态1！=“已授予”&状态2！=“已授予”）{
警报。警报（“未授予权限”）；
返回；
}
ImagePicker.launchCameraAsync（）.catch（e=>
Alert.Alert（'无法启动摄像头'，例如消息）
);
});
}
},
});
render（）{
返回(
向左平移以打开相机
);
}
}

实现这一点的最简单方法可能是在屏幕外渲染与当前视图尺寸相同的视图。大概使用的是

Dimensions.get（'window'）

，但您的用例可能略有不同

将其设置为屏幕外的关键是绝对定位，并将

left

的值设置为屏幕宽度的负值。但是，要完成转换，您需要将此值设置为

动画.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>

//在构造函数中
此.state={
leftValue:新的动画.Value（-screenWidth）
}
//渲染中
{cameraImplementation}

// 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>