реагировать на родную спину - PullRequest
Новая
       25

реагировать на родную спину

0 голосов
/ 29 мая 2019

У меня есть изображение, на котором я пытаюсь центрировать текст на нем.

Для этого я использую ImageBackground, чтобы иметь дочерние элементы изображения.

Однако изображение уменьшается на небольших устройствах и, если возможно, в полном размере

Когда я центрирую свой текст, он выравнивается по центру после полного отношения изображения (на большом экране, где вы можете видеть все изображение, его по центру - на маленьких экранах его смещение, потому что часть изображения обрезается, чтобы соответствовать. 

<ImageBackground style={{ width: wp('50%'), 
                 height: hp('50%'), 
                 resizeMode: 'cover', 
                 justifyContent: 'center', 
                 alignItems: 'center' }}
                 source={require('../assets/images/12.jpg')}>

    // if the full image is showing - it's centered, otherwise not!
    <Text style={{ color: "red" }}>Centered text</Text>

</ImageBackground>

1 Ответ

1 голос
/ 29 мая 2019

вам нужно добавить дополнительный вид, чтобы обернуть ImageBackground и добавить свойство стиля justifyContent и выравнивание элементов по центру, и я думаю, что это устранит вашу проблему. 

<View style={{ flex:1 , justifyContent: 'center', alignItems: 'center' }}>
    <ImageBackground

        style={{ width: wp('50%'), height: hp('50%'), resizeMode: 'cover', justifyContent: 'center', alignItems: 'center' }}
        source={require('../assets/images/12.jpg')}>

        // if the full image is showing - it's centered, otherwise not!
        <Text style={{ color: "red" }}>Centered text</Text>

    </ImageBackground>
</View>
...