Question

在下面显示的“相机”屏幕中，我有一个可触摸的图像。要求是将其固定在手机底部。当用户将方向更改为横向模式时，touchable不应更改其位置（以便用户可以用右手手指单击）。如何使它可触摸不会改变方向的位置。

渲染摄像机和按钮的代码如下：

renderCamera() {
        return (
            <Camera
                ref={(cam) => {
                    this.camera = cam;
                } }
                style={styles.preview}
                aspect={Camera.constants.Aspect.fill}
                captureTarget={Camera.constants.CaptureTarget.disk} >

                <TouchableHighlight
                    style={styles.capture}
                    onPress={this.takePicture.bind(this)}
                    underlayColor={constant.COLOR_PRIMARY}
                    >
                    <View />
                </TouchableHighlight>
            </Camera>
        );
    }

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#000'
    },

    capture: {
        width: 70,
        height: 70,
        borderRadius: 35,
        borderWidth: 5,
        borderColor: constant.COLOR_PRIMARY,
        backgroundColor: constant.COLOR_PRIMARY,
        marginBottom: 15
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
        width: '100%',
        height: '100%'
    }

});

我试图在此屏幕上锁定方向（使用React-Native-Orientation-Lock），但这增加了一些其他影响。因此，我没有研究其他解决方案。

还有其他解决方案吗？

Answer 1

如果您使用的是 react-native-camera 插件

您可以尝试在问题here

中显示类似的内容

这里是example，您可以在其中使用功能

更新相机方向

takePicture = async function() {
    if (this.camera) {
        const options = {
            orientation:'portrait',
            forceUpOrientation: true, 
            quality: 0.20, 
            base64: true 
        };
        const data = await this.camera.takePictureAsync(options)
        return data
    }
};

Answer 2

请尝试使用 React-Native-Orientation-Lock

它是一个本机模块，可以侦听设备的方向变化，获取当前方向，锁定到首选方向。（跨平台支持）。

React Native Camera-如何使捕获按钮粘在手机屏幕的一侧？

2 个答案: