个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 01:08:06 25 4
gpt4 key购买 nike

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

enter image description here

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

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;

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

最佳答案

您需要将 resizeMode 设置为 ImageBackground 的 props。

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

关于javascript - 如何解决React-Native中ImageBackground不采用全宽问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55432821/

25 4 0
文章推荐： jquery - 使用 jquery 同步排列多个效果
文章推荐： asp.net-mvc-4 - MVC Razor 强类型 View 上表行的回发复选框
文章推荐： javascript - rxjs 可观察管道内的建模和 if/else 模式
文章推荐： javascript - react +Redux |此处 Prop 返回未定义 - 为什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com