Question

我的渲染功能如下：

render() {
        return (
            <View style={styles.container}>
                <Camera
                    style={styles.camera}
                    ref={(cam) => {
                        this.camera = cam;
                    }}
                    onZoomChanged={this.onZoomChanged.bind(this)}
                    onFocusChanged={this.onFocusChanged.bind(this)}
                    torchMode={this.state.torch}
                    flashMode={this.state.flash}>
                    {this.imageOverlay()}
                </Camera>
                <View style={styles.commandBar}>
                    <TouchableHighlight onPress={this.fromLocal.bind(this)}>
                        <View style={styles.capture}>
                            <Icon .../>
                        </View>
                    </TouchableHighlight>

                    <TouchableHighlight onPress={this.takePicture.bind(this)}>
                        <View style={styles.captureN}>
                            <Icon style={{transform: [{rotate: '90deg'}],}}  .../>
                        </View>
                    </TouchableHighlight>

                    <TouchableHighlight onPress={this.onTorchToggle.bind(this)}>
                        <View style={styles.capture}>
                            <Icon ... />
                        </View>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }

我从上面的代码中移除了少量TouchableHighlight，以使代码更小。

样式如下：

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column'
    },

    camera: {
        justifyContent: 'flex-end',
        alignItems: 'center',
        width: dw.width,
        height: dw.height,
        flexDirection:'column'
    },
    commandBar: {
        flex: 0,
        bottom: 85,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: "center"
    },
    capture: {
        backgroundColor: '#444',
        opacity: 0.7,
        borderRadius: 5,
        padding: 8,
        paddingTop: 5,
        paddingBottom: 5,
        width: 55,
        marginLeft: 8,
        alignItems: 'center',
        transform: [{rotate: '90deg'}],
    },

    firstCapture: {
      marginLeft: 0
    },

    captureN: {
        backgroundColor: '#444',
        opacity: 0.7,
        borderRadius: 5,
        padding: 10,
        width: 60,
        marginLeft: 8,
        alignItems: 'center'
    },
    imageContainer: {
        flexDirection: 'row',
        alignItems: 'flex-end'
    },
    innerImage: {
        flex: 0,
        height: dw.width,
        width:  dw.height,
        marginBottom: 170,
        resizeMode: 'contain',
        transform: [{rotate: '90deg'}]
    }

});

我想在横向模式下拍摄带有图像叠加的照片。在IOS它工作正常，它看起来像：

但在Android上它不起作用，我按照以下方式获取屏幕：

知道怎么解决吗？

Answer 1

也许您可以尝试使用不同的Android和iOS平台样式。例如：

import { Platform, StyleSheet } from 'react-native';

const styles = StyleSheet.create({   height: (Platform.OS === 'ios') ? 200 : 100, });

来源：React Native Platform

React Native中的IOS和Android的样式不同

1 个答案: