Question

我有一个简单的屏幕，其中包含图像和一些文本，以及页面底部的一个按钮。在纵向模式下看起来不错，但是在横向模式下，图像，文本和按钮显示不正确。我正在尝试使图像在高度不足时调整大小，但我找不到解决方法。

 render() {        
    return (
        <View style={styles.container}>
            <View style={styles.bodyContainer}>
                <Image style={styles.image}
                    source={require('./../../assets/images/server-info-icon.png')}
                />
                <Text style={styles.serverDetailsText}>Server details</Text>
                <Text style={styles.instructionText}>instruction</Text>
            </View>
            <View style={styles.buttonContainer}>
                <TouchableHighlight style={styles.gotItButton}
                        onPress={() => this.props.navigation.goBack(null)}>
                    <Text style={styles.gotItButtonText}>GOT IT</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
container: {
    flex: 1,
    backgroundColor: '#ffffff'
},
bodyContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
},
buttonContainer: {
    height: 82
},
gotItButton: {
    backgroundColor: COLORS.BUTTONS_COLOR,
    height: 46,
    width: 288,
    borderRadius: 25,
    alignSelf: 'center',
    position: 'absolute',
    bottom: 18
},
gotItButtonText: {
    textAlign: 'center',
    paddingTop: 11,
    paddingBottom: 13,
    fontSize: 17,
    fontFamily: CONSTANTS.DEFAULT_FONT,
    fontWeight: CONSTANTS.TEXT_BOLD_WEIGHT,
    color: COLORS.BUTTONS_TEXT_COLOR
},
image: {
    maxHeight: 170,
    maxWidth: 361,
    marginBottom: 5
},
instructionText: {
    color: COLORS.LABELS_COLOR,
    fontSize: 15,
    fontFamily: CONSTANTS.DEFAULT_FONT,
    height: 36,
    width: 206,
    flexWrap: 'wrap',
    textAlign: 'center',
    marginTop: 2,
    marginBottom: 2
},
serverDetailsText: {
    color: COLORS.TEXT_COLOR,
    fontSize: 17,
    fontFamily: CONSTANTS.DEFAULT_FONT,
    fontWeight: CONSTANTS.TEXT_BOLD_WEIGHT,
    width: 206,
    textAlign: 'center',
    marginTop: 2,
    marginBottom: 2
}

}）

Answer 1

示例代码

<Image style={{flex: 1,
           width: null,
           height: null}}
           source={require('myimage')}
/>

请在外部视图中添加样式并使用flex。然后将Inner Flex更改为 0.1 到 1 。

反应本地图像保持居中

1 个答案: