Javascript 如何解决React Native中ImageBackground不带全宽的问题？
我在LeftDrawer标题中使用了一个ImageBackground。我已经将高度和宽度设置为100%，并且没有设置任何填充或边距。但我不明白为什么我的抽屉标题图像在左右两侧占了一些空间。您可以在下图中看到这一点- 这里我提供了这个类的代码-Javascript 如何解决React Native中ImageBackground不带全宽的问题？,javascript,react-native,Javascript,React Native,我在LeftDrawer标题中使用了一个ImageBackground。我已经将高度和宽度设置为100%，并且没有设置任何填充或边距。但我不明白为什么我的抽屉标题图像在左右两侧占了一些空间。您可以在下图中看到这一点- 这里我提供了这个类的代码- import React, {Component} from "react"; import {View, Text, StyleSheet, ScrollView, Image, AsyncStorage, ImageBackground} from
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;
import React，{Component}来自“React”；
从“react native”导入{View、Text、StyleSheet、ScrollView、Image、AsyncStorage、ImageBackground}；
从“本机基础”导入{容器、内容、图标、标题、正文}；
从“react navigation”导入{DrawerNavigator、StackNavigator、DrawerItems、SafeAreaView}；
从“../components/NoteMeHome”导入NoteMeHome；
从“../components/SettingsScreen”导入设置屏幕；
从“本机基”导入{Root}；
从“expo”导入{Font，AppLoading}；
让用户\电子邮件=“”，用户\名字=“”；
类HomeDrawer扩展组件{
状态={
加载：正确
}
静态导航选项={
headerLeft:null
}
componentDidMount（）{
AsyncStorage.getItem（“用户\电子邮件”）。然后（值=>{
console.log（值）；
//当“@ProductTour:key”不存在时，您需要处理该情况
用户\电子邮件=值；
});
AsyncStorage.getItem（“用户名”）。然后（值=>{
console.log（值）；
//当“@ProductTour:key”不存在时，您需要处理该情况
user\u first\u name=值；
});
}
异步组件willmount（）{
等待Font.loadAsync({
Roboto:require（'native-base/font/Roboto.ttf'），
Roboto_medium:require（'native-base/font/Roboto_medium.ttf'））
});
this.setState（{loading:false}）；
}
render（）{
if（this.state.loading）{
返回(
)
}
返回(
)
}
}
常量CustomDrawerContentComponent=（道具）=>(
{user_email}
{user\u first\u name}
);
const MyApp=抽屉驱动程序({
注：首页：{
屏幕：NoteMeHome
},
设置：{
屏幕：设置屏幕
}
},
{
initialRouteName:“NoteMeHome”，
抽屉位置：'左'，
contentComponent:CustomDrawerContentComponent，
DropeRopenRoute:“DropeRopen”，
抽屉关闭路线：“抽屉关闭”，
抽屉勾选：“抽屉勾选”
}
);
const styles=StyleSheet.create({
容器：{
textAlign:“中心”
},
抽屉阅读器：{
身高：150，
宽度：'100%'，
背景颜色：“白色”
},
抽屉阅读器文本：{
弹性：1，
背景颜色：“#5555”
},
付款人：{
身高：70，
宽度：70，
边界半径：100，
},
抽屉底座：{
flexDirection:“行”，
对齐项目：'中心'，
背景颜色：'透明'
},
});
导出默认HomeDrawer；
因此，如果有人能帮助您找出问题所在并提出解决方案，那将是非常好的。您需要将resizeMode设置为ImageBackground的道具
<ImageBackground
source={require('../assets/header.jpeg')}
resizeMode={'cover'}
style={{width: '100%', height: '100%'}}>