宽度：'100%' vs Dimension.get('window').width in react native

Question

我是新手，对整个原生和 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)'
},

Answer 1

您需要了解100%您使用的宽度和基本区别是什么dimension.get('window')

100% 意味着您希望获得容器 100% 的宽度，这意味着如果您的父容器是 50px，那么 100% 将返回 50px。

在width从dimension给你的设备宽度的静态宽度

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

如果您想跟随父容器，那么使用100%then widthfrom会更容易，dimension但出于响应原因，没有任何父容器或者它是父容器本身，那么widthfromdimension会更好地工作