图像不适合安卓反应原生

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 中的图像不同，在我的代码中还有什么要做的吗？如何在安卓中修复图像。真的需要帮助。

Answer 1

你可以试试Platform

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