React Native中如何解决View设置百分比宽高无法占满全屏的问题

• React Native 中百分比宽高的计算依赖父元素的明确固定尺寸：如果父元素的尺寸是自适应内容撑开的，没有提前确定的宽高值，子元素设置的百分比尺寸无法找到参照基准，会直接失效。
• 你的 StyleContentWrapper 嵌套在 ScrollView 内部，而 ScrollView 的默认内容容器高度由内部所有子元素的总高度决定，本身没有固定高度，因此 height: 100% 无法生效。
• 额外影响因素：你的 MainWrapper 设置了 align-items: center，如果嵌套的 SafeAreaView 没有设置 flex: 1 占满父级空间，会导致 SafeAreaView 本身尺寸仅适配内容，进一步导致内部 ScrollView 的尺寸也无法占满屏幕，宽度百分比也会失效。

方案1：调整 ScrollView 配置（推荐） #

这个方案可以同时保留滚动能力，且完美适配不同屏幕尺寸，不需要写固定值：

1. 给 SafeAreaView 添加 flex: 1 和 width: 100% 样式，保证它占满父级 MainWrapper 的全部空间：

// 补充你缺失的 container 样式定义
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%'
  }
})

如果用 styled-components 定义 SafeAreaView，直接在样式里加上述两个属性即可。
2. 给 ScrollView 添加两个属性：

• 给 ScrollView 自身加 style={{flex: 1}}，保证 ScrollView 占满 SafeAreaView 的全部空间
• 给 ScrollView 加 contentContainerStyle={{flexGrow: 1}}，这个属性会让 ScrollView 的内容容器最小高度等于 ScrollView 自身的高度，内容超出时仍然可以正常滚动
  修改后的 ScrollView 代码如下：

<ScrollView style={{flex: 1}} contentContainerStyle={{flexGrow: 1}}>
  <StyleContentWrapper>
    <Paragraph> Hello World! </Paragraph>
  </StyleContentWrapper>
</ScrollView>

调整完成后，StyleContentWrapper 上的 width: 100% 和 height: 100% 就有了明确的父级尺寸参照，可以正常生效。如果还有宽度问题，可以把 MainWrapper 上的 align-items: center 和 justify-content: center 属性去掉，避免子元素被居中限制尺寸。

方案2：用屏幕尺寸动态计算 #

如果不需要兼容横竖屏切换，也可以直接通过系统 API 获取屏幕尺寸赋值：

// 导入React Native内置的Dimensions工具
import { Dimensions } from 'react-native'
const { width: screenWidth, height: screenHeight } = Dimensions.get('window')

// 修改StyleContentWrapper的样式
const StyleContentWrapper = styled.View`
  height: ${screenHeight}px;
  width: ${screenWidth}px;
  background-color: red;
  padding-top: 40px;
  padding-horizontal: 20px;
`

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