Question

我有一个启动画面，在中间显示图像。该图像是完全可见的，适合在iPhone中使用。但是在android中，图像被裁剪掉了，从顶部和底部开始看不到某些部分。

const win = Dimensions.get('window');
const ratio = win.width / 817;

render() {
    return (
        <View style={styles.container}>
            <Text style={styles.logoContainer}>
                <Image
                    style={styles.logo}
                    resizeMode={'contain'}
                    source={require('../../../assets/logo.png')}
                />
            </Text>
        </View>
    );
}

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#0d2c4f',
    justifyContent: 'center'
},
logoContainer: {
    textAlign: 'center',
    paddingLeft: 20,
    paddingRight: 20
},
logo: {
    width: win.width,
    height: 123 * ratio,
    resizeMode: 'contain'
}
});

为什么iphone和android中的图像不同，我的代码中还有其他要做的事情吗？如何在Android中修复图像。真的需要帮助。

Answer 1

您可以尝试Platform

const win = Platform.OS === 'ios' ? Dimensions.get('window') : Dimensions.get('screen')
resizeMode={'contain'}
...
logo: {
    width: win.width,
    height: 123 * ratio

图像不适合android react native

1 个答案: