Реагируйте на родное изображение, сохраняя его в центре - PullRequest
Новая
       23

Реагируйте на родное изображение, сохраняя его в центре

0 голосов
/ 03 июля 2018

У меня есть простой экран с изображением и текстом + кнопка внизу страницы. В портретном режиме это выглядит хорошо, но в альбомной ориентации изображение, текст и кнопка отображаются неправильно. Я пытаюсь настроить изображение, чтобы настроить размер, когда высоты недостаточно, но я не могу найти способ сделать это. 

 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
}

})

1 Ответ

0 голосов
/ 03 июля 2018

Пример кода 

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

пожалуйста, добавьте Outer View со стилем использования flex. затем Inner Flex изменяется до 0,1 до 1 .

...