Question

我在LeftDrawer标头中使用了一个ImageBackground。我已将高度和宽度设置为100％，并且未设置任何填充或边距。但是然后我不明白为什么我的抽屉标题图像在左侧和右侧占据了一些空间。您可以在下面的给定图像中看到它-

在这里，我提供了此类的代码-

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);
      // you will need to handle case when `@ProductTour:key` is not exists
     user_email = value;
    });

    AsyncStorage.getItem("user_first_name").then(value => {
      console.log(value);
      // you will need to handle case when `@ProductTour:key` is not exists
     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;

因此，如果有人帮助找出问题所在并提出解决方案的建议，那就太好了。

Answer 1

您需要将resizeMode设置为ImageBackground的道具。

  <ImageBackground 
      source={require('../assets/header.jpeg')} 
       resizeMode={'cover'}
     style={{width: '100%', height: '100%'}}>

如何解决ImageBackground在React-Native中不采用全宽的问题？

1 个答案: