Как выровнять вид внизу страницы, не делая его зависимым от других видов - PullRequest
Новая
       23

Как выровнять вид внизу страницы, не делая его зависимым от других видов

0 голосов
/ 10 декабря 2018

Я хочу выровнять панель инструментов просмотра в нижней части страницы без использования «пробела» атрибута justifyContent.

View toolbar which needs to be aligned at the bottom

Ниже приведенкод, как я делаю эту панель инструментов: 

    <View style={{ height: '100%', justifyContent: 'space-between', }}>

    <View style={{ flexDirection: 'row', height: 44,
     alignItems: 'center', justifyContent: 'space-around', 
     backgroundColor: 'yellow'}}>

       <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>
        <Image source={require('./resources/images/grid.png')}/>

    </View>
    </View>

1 Ответ

0 голосов
/ 10 декабря 2018

Я посмотрел на атрибуты дна и позиции.Когда я добавляю bottom: 0, position: 'absolute' к стилю внутреннего вида, нам также нужно указать ширину.(Не знаю, почему относительные позволяют автоматически принимать полную ширину).Но если мы добавим {bottom: 0, position: 'absolute', width: '100%'), то внутреннее представление всегда будет выровнено снизу.Как ниже 

<View style={{ flexDirection: 'row', height: 44,
 alignItems: 'center', justifyContent: 'space-around', 
 backgroundColor: 'yellow', bottom: 0, position: 'absolute', width: '100%'}}>

   <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>
    <Image source={require('./resources/images/grid.png')}/>

</View>
</View>
...