Question

我在使用React Native时遇到问题。我正在尝试将图像作为页眉，该页眉需要响应自身调整大小以适合视口内部并水平居中。

不幸的是，我无法使用诸如resizeMode: 'contain'之类的样式参数来产生任何结果，并且在遵循说使用样式参数width: undefined和{{ 1}}。

我对React Native还是有点陌生，所以我如何解决这个问题肯定有一个非常明显的问题。我也是Stack Overflow上的新手，所以也欢迎任何有关如何最好地描述或显示我的问题的指针。

这是我正在使用的源代码，在图像对于屏幕而言太大的情况下会产生结果：

height: undefined

Image going off the side of the screen

这是我正在使用的源代码，图像从屏幕上消失了：

export default class ComponentIndex extends React.Component {
    render(){
        return(
            <ImageBackground
            source={require('./../../assets/images/background_placeholder.png')}
            style={{width: '100%', height: '100%'}}
            >
                <View style={styles.parentView}>
                    <View style={styles.elementSpacer}>
                        <Image
                            source={require('./../../assets/images/iview_learning_logo.png')}
                            style={styles.headerImage}
                        />
                    </View>
                    <View style={styles.elementContainer}>
                        <Text style={styles.subheadingText}>App for comprehensive tutorials</Text>
                    </View>
                    <View style={styles.elementContainer}>
                        <Button rounded style={styles.startButton}>
                            <Text style={styles.startButtonText}>LET'S GO</Text>
                        </Button>
                    </View>
                </View>
            </ImageBackground>
        );
    }
}

const styles = StyleSheet.create({
    parentView: {
        flex: 1,
        flexDirection: 'column',
        padding: 30,
        justifyContent: 'center',
    },
    headerImage: {
        resizeMode: 'contain',
    },
    elementSpacer: {
        flex: 1,
    },
    elementContainerHeader: {
        height: 60,
    },
    elementContainer: {
        margin: 10,
    },
    subheadingText: {
        fontSize: 18,
        textAlign: 'center',
        //fontFamily: 'Arial',
    },
    startButton: {
        alignItems: 'center',
        justifyContent: 'center',
        alignSelf: 'center',
        paddingRight: 25,
        paddingLeft: 25,
        backgroundColor: '#c00000',
    },
    startButtonText: {
        color: 'white',
        //fontWeight: 'bold',
        fontSize: 20,
        //fontFamily: 'Arial',
    },
});

Image disappeared entirely

Answer 1

查看相关问题后，我找到了一个对我有用的解决方案。添加以下样式参数可以达到目的：

width: null,
resizeMode: 'contain',
height: 220

The Stack Overflow question this solution was taken from

图片将无法调整大小以适合窗口，所有其他修复程序会使图片消失-React Native

1 个答案: