React Native中ImageBackground无法占满宽度问题的解决方法

我在左侧抽屉的头部用了ImageBackground组件，已经把它的宽高都设为100%，也没加任何padding或margin，但图片左右两侧还是有空隙。麻烦帮忙排查下问题，给点解决思路~

相关代码 #

import React, {Component} from "react";
import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from 'react-native';
import {Container, Content, Icon, Header, Body} from 'native-base';
import {DrawerNavigator, StackNavigator, DrawerItems, SafeAreaView} from 'react-navigation';
import NoteMeHome from '../components/NoteMeHome';
import SettingsScreen from '../components/SettingsScreen';
import {Root} from 'native-base';
import {Font, AppLoading} from 'expo';

let user_email ='', user_first_name='';

class HomeDrawer extends Component {
  state = { loading: true }

  static navigationOptions = {
    headerLeft: null
  }

  componentDidMount() {
    AsyncStorage.getItem("user_email").then(value => {
      console.log(value);
      user_email = value;
    });
    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      user_first_name = value;
    });
  }

  async componentWillMount() {
    await Font.loadAsync ({
      Roboto: require('native-base/Fonts/Roboto.ttf'),
      Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf')
    });
    this.setState({loading:false});
  }

  render() {
    if(this.state.loading) {
      return(
        <Root>
          <AppLoading/>
        </Root>
      )
    }
    return(
      <MyApp/>
    )
  }
}

const CustomDrawerContentComponent = (props) => (
  <Container style={styles.Container}>
    <Header style={styles.drawerHeader}>
      <ImageBackground source={require('../assets/header.jpeg')} style={{width: '100%', height: '100%',resizeMode:'cover'}}>
        <Body style={styles.drawerBody}>
          <Image style={styles.drawerImage} source={{uri: 'https://img.icons8.com/ultraviolet/80/000000/administrator-male.png'}} />
          <View style={styles.drawerHeaderText}>
            <Text>{user_email}</Text>
            <Text>{user_first_name}</Text>
          </View>
        </Body>
      </ImageBackground>
    </Header>
    <Content>
      <DrawerItems {...props}/>
    </Content>
  </Container>
);

const MyApp = DrawerNavigator({
    NoteMeHome:{
      screen: NoteMeHome
    },
    Settings:{
      screen: SettingsScreen
    }
  }, {
    initialRouteName: 'NoteMeHome',
    drawerPosition: 'left',
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle'
  }
);

const styles = StyleSheet.create({
  Container:{
    textAlign:'center'
  },
  drawerHeader:{
    height:150,
    width:'100%',
    backgroundColor: 'white'
  },
  drawerHeaderText:{
    flex:1,
    backgroundColor:'#5555'
  },
  drawerImage:{
    height: 70,
    width: 70,
    borderRadius: 100,
  },
  drawerBody: {
    flexDirection:'row',
    alignItems:'center',
    backgroundColor:'transparent'
  },
});

export default HomeDrawer;

问题排查与解决建议 #

出现空隙的核心原因是你用到的第三方组件（native-base的Container/Header，以及DrawerNavigator）自带了默认的padding/margin，这些默认样式会挤压你的ImageBackground，导致它看起来没占满宽度。这里有几个具体的修复步骤：

1. 移除Container和Header的默认内边距
   修改styles里的Container和drawerHeader样式，强制去掉水平方向的padding和margin：

   const styles = StyleSheet.create({
     Container:{
       textAlign:'center',
       paddingHorizontal: 0, // 新增：去掉水平内边距
       marginHorizontal: 0   // 新增：去掉水平外边距
     },
     drawerHeader:{
       height:150,
       width:'100%',
       backgroundColor: 'white',
       padding: 0,           // 新增：去掉所有内边距
       margin: 0             // 新增：去掉所有外边距
     },
     // ...其他样式不变
   });
   

2. 调整DrawerNavigator的内容选项
   在DrawerNavigator的配置里添加contentOptions，确保抽屉内容本身没有额外的间距：

   const MyApp = DrawerNavigator({
       // ...路由配置不变
     }, {
       initialRouteName: 'NoteMeHome',
       drawerPosition: 'left',
       contentComponent: CustomDrawerContentComponent,
       drawerOpenRoute: 'DrawerOpen',
       drawerCloseRoute: 'DrawerClose',
       drawerToggleRoute: 'DrawerToggle',
       contentOptions: { // 新增
         style: {
           paddingHorizontal: 0,
           marginHorizontal: 0
         }
       }
     }
   );
   

3. 检查Body组件的默认样式
   native-base的Body组件也可能自带padding，你可以给它加上padding:0的样式：

   <Body style={[styles.drawerBody, {padding: 0}]}>
     // ...内部内容不变
   </Body>
   

做完这些修改后，你的ImageBackground应该就能完全占满抽屉头部的宽度了。本质上就是把所有可能给父容器带来间距的默认样式都清零，让你的背景图能真正撑满100%宽度。

内容的提问来源于stack exchange，提问作者S. M. Asif