宽度：＆＃39; 100％＆＃39; vs Dimension.get（＆＃39; window＆＃39;）。width in react native

Question

我对新的原生和css样式作为一个整体做出反应很抱歉，如果问题非常基本的话。我想要一个视图占用100％的可用屏幕宽度，当我使用下面的代码时，我的视图似乎超出了屏幕边界，但是当我使用Dimension.get（＆＃39; window＆＃39;）。宽度它工作得很好。有谁可以解释他们彼此之间的差异。任何帮助将非常感激。感谢

    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)'
},

Answer 1

您需要了解与100%的基本区别以及使用dimension.get('window')获得的宽度

100%表示您希望容器100％宽度，这意味着如果您的父容器为50px，则100％将返回50px。

来自width的{​​{1}}为您提供设备宽度的静态宽度

所以要小心选择要用于组件的内容

如果你想跟随父容器，那么从dimension更容易使用100%然后width但是由于没有任何父容器的响应原因，或者它是父容器本身{来自dimension的{​​1}}会更好用

Answer 2

您需要使用flexDirection: 'row'添加包装器视图，然后使用flex: 1

设置子视图（或可触摸或其他）的样式

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

或者您可以在alignSelf: 'stretch'内使用flexDirection: 'column'（这是所有视图的默认设置）

挂在那儿。学习flexbox需要一些练习。当你遇到困难时，你的第一个想法应该是＆＃34;我是否需要添加包装器视图？＆＃34;