ширина: '100%' против Dimension.get ('окно'). ширина в реагировать - PullRequest
Новая
       11

ширина: '100%' против Dimension.get ('окно'). ширина в реагировать

0 голосов
/ 30 мая 2018

Я новичок, чтобы реагировать на нативный и CSS стиль в целом, так что извините, если вопрос очень простой.Я хочу, чтобы представление занимало 100% доступной ширины экрана, и когда я использую код, показанный ниже, мое представление выходит за границы экрана, хотя при использовании Dimension.get ('window'). Width это работает просто отлично.может кто-нибудь объяснить, чем они отличаются друг от друга.Любая помощь могла бы быть полезна.спасибо 

    return(
        <TouchableOpacity style = {styles.food_wrapper}
            onPress = {()=> this.userAction()}
        >
            <Text style = {styles.foodname}>
                {this.name}
            </Text>

            <Text style = {styles.foodprice}>
                Rs: {this.price}
            </Text>
        </TouchableOpacity>
    );


food_wrapper:{
    flex: 1,
    flexDirection :'row',
    justifyContent:'space-between',
    alignItems:'flex-start',
    width: '100%',//Dimensions.get('window').width,
    minHeight: 50,
    marginVertical: '1%',
    padding: '2%',
    backgroundColor: 'rgb(155,200,200)'
},

when I use Dimensions.get('window').width

when I use width: '100'

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Вам необходимо понять, в чем основное отличие от 100% и ширины, которую вы получаете, используя dimension.get('window')

100% означает, что вы хотите получить контейнер 100% ширины, что означает, что ваш родительский контейнербудет 50px, тогда 100% вернет 50px.

* width из dimension даст вам статическую ширину ширины вашего устройства

, поэтому будьте осторожны при выборе того, что использовать с вашим компонентом

если вы хотите следовать родительскому контейнеру, тогда проще использовать 100%, затем width из dimension, но по причинам, не связанным с родительским контейнером, или это сам родитель, тогда width из dimension будет работать лучше

0 голосов
/ 30 мая 2018

Вам нужно добавить вид обертки с помощью flexDirection: 'row', а затем стилизовать дочерний вид (или Touchable или любой другой) с помощью flex: 1

<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1, height: 100, backgroundColor: 'grey' }} />
</View>

Или вы можете использовать alignSelf: 'stretch' внутри нескольких сflexDirection: 'column' (это значение по умолчанию для всех видов)

Держись там.Изучение flexbox требует некоторой практики.Ваша первая мысль, когда вы застряли, должна звучать так: «Нужно ли мне добавлять вид оболочки?»

...