React Native中width:'100%'与Dimension.get('window').width的差异解析

别担心，新手遇到这种样式问题太常见了，我来帮你拆解两者的核心差异：

1. 百分比宽度的参考逻辑 #

width: '100%'的宽度是相对于父组件的可用宽度计算的，而非直接等于屏幕宽度。如果你的TouchableOpacity的父组件本身带有padding/margin，或者父组件的宽度没有占满整个屏幕，这个100%就会是父组件的宽度值，而非设备屏幕的实际宽度。

2. 盒模型的计算方式 #

React Native默认采用content-box盒模型：你设置的width仅代表元素内容区域的宽度，padding会额外叠加到总宽度上。比如你的代码里设置了width: '100%'和padding: '2%'，最终元素的总宽度会是：

父组件宽度 + 左右padding的总和

如果父组件宽度等于屏幕宽度，那总宽度就会变成100%屏幕宽度 + 4%屏幕宽度，自然就超出屏幕边界了。

而Dimensions.get('window').width是直接获取设备屏幕的实际像素宽度，不管父组件的样式如何，它都会把元素的内容宽度固定为屏幕宽度。虽然同样带有padding，但因为内容宽度是屏幕宽度，加上padding后，超出的部分要么被父组件的布局规则限制（比如overflow: hidden），要么视觉上刚好贴合屏幕边缘（从你的截图就能看到这个效果）。

给你的解决方案 #

其实你不需要同时设置flex: 1和width，调整一下样式就能解决问题：

• 如果父组件是flex容器（比如父组件设置了flex: 1），直接去掉width: '100%'，flex: 1会自动让组件占满父组件的可用宽度，此时padding会被包含在这个宽度内，不会超出屏幕。
• 如果你需要固定占满屏幕宽度，可以保留Dimensions.get('window').width，同时把padding拆分为paddingVertical和paddingHorizontal，更精准控制内边距。

调整后的样式示例：

food_wrapper:{
  flex: 1,
  flexDirection :'row',
  justifyContent:'space-between',
  alignItems:'flex-start',
  // 去掉width: '100%'，依赖flex:1占满宽度
  minHeight: 50,
  marginVertical: '1%',
  paddingVertical: '2%',
  paddingHorizontal: '2%',
  backgroundColor: 'rgb(155,200,200)'
},

内容的提问来源于stack exchange，提问作者Syed