React Native 使用两个<View>布局时屏幕两侧出现留白间隙该如何解决

问题根因 #

1. React 要求组件render方法只能返回单个根节点，你当前直接返回了StatusBar、两个<View>三个同级元素，没有外层根容器约束宽高，导致组件无法占满屏幕宽度
2. 缺少根容器的全屏适配样式，没有明确设置占满全屏宽高、清除默认边距

解决方案 #

给所有根级元素外层包裹一个全屏<View>容器，配置对应的样式即可，修改后的完整代码如下：

import React, { Component } from 'react';
import { StyleSheet, Text, View, StatusBar, Image, Alert, TouchableOpacity, Linking } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <StatusBar translucent={true} backgroundColor="transparent" barStyle="light-content" />
        <View style={styles.titleBar}>
        </View>
        <View style={styles.bodyContent}>
        </View>
      </View>
    );
  }
}

//样式表
const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    padding: 0,
    margin: 0,
  },
  titleBar: {
    flex: 2,
    backgroundColor: '#E9E9E9',
  },
  bodyContent: {
    flex: 5,
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
});

额外校验点 #

如果修改后仍有间隙，可以检查以下两个配置：

• 项目入口的根组件（通常是index.js里的AppRegistry注册的外层）有没有额外设置paddingHorizontal或者marginHorizontal属性
• 如果使用了SafeAreaView组件，确认没有额外设置左右边距

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