React native 为什么我抽屉里的背景是空的？

我使用react native drawer，我为它的内容设置了一个图像和一个列表，我发现在图像和列表之间有一个空的背景。

即使我删除了空背景仍然存在的图像。我真的搞不懂。谁能给我一些建议

这是我的抽屉设置：

<Drawer
    type="displace"
    ref={(ref) => { this.drawer = ref; }}
    content={<ControlPanel navigation={this.props.navigation}/>}
    backgroundColor= '#33FFAA'
    openDrawerOffset={0.4}
    panOpenMask={0.90}
    tweenHandler={(ratio) => ({
      main: { opacity:(2-ratio)/2 }
    })}
    captureGestures="open"
    onClose={() => this.closeDrawer()} >

{this.drawer=ref；}
内容={}
背景颜色='#33FFAA'
opendrawerofset={0.4}
全景遮罩={0.90}
tweenHandler={（比率）=>({
main:{不透明度：（2-比率）/2}
})}
captureporters=“打开”
onClose={（）=>this.closeDrawer（）}>

这是我的ControlPanel.js

import React, { Component } from 'react';
import { ScrollView, Image, Text } from 'react-native';
import { List, ListItem } from 'react-native-elements';
class ControlPanel extends Component {
  state = {
    expanded: false
  };
  renderDescription() {
    if (this.state.expanded) {
      return (
        <Text>Hi</Text>
      );
    }
  }

  changeExpanded() {
    this.setState({ expanded: true });
  }
  render() {
    console.log('render!');
    const list = [
      {
        title: 'test1',
        icon: 'av-timer'
      },
      {
        title: 'test2',
        icon: 'flight-takeoff'
      },
      {
        title: 'test3',
        icon: 'av-timer'
      },
      {
        title: 'test4',
        icon: 'av-timer'
      },
      {
        title: 'test5',
        icon: 'av-timer'
      },
    ];
    return (
      <ScrollView>
        <Image
          style={{width: '100%', height: 180, flex: 1}} 
          source={{ uri: 'https://shoutem.github.io/static/getting-started/restaurant-1.jpg' }}
        />   
        <List>
          {
            list.map((item, i) => (
              <ListItem
                onPress={this.changeExpanded.bind(this)}
                key={i}
                title={item.title}
                leftIcon={{name: item.icon}}
              />
            ))
          }  
          {this.renderDescription()} 
        </List>                    
     </ScrollView>
    );
  }
}

export default ControlPanel;

import React，{Component}来自'React'；
从“react native”导入{ScrollView，Image，Text}；
从“react native elements”导入{List，ListItem}；
类控制面板扩展组件{
状态={
扩展：false
};
renderDescription（）{
if（this.state.expanded）{
返回(
你好
);
}
}
变更扩展（）{
this.setState（{expanded:true}）；
}
render（）{
console.log（'render！'）；
常数列表=[
{
标题：“test1”，
图标：“av定时器”
},
{
标题：“test2”，
图标：“飞行起飞”
},
{
标题：“test3”，
图标：“av定时器”
},
{
标题：“test4”，
图标：“av定时器”
},
{
标题：“test5”，
图标：“av定时器”
},
];
返回(
{
list.map（（项目，i）=>(
))
}  
{this.renderDescription（）}
);
}
}
导出默认控制面板；

如他们的

列表中所述，容器的默认样式为

@default '{marginTop: 20, borderTopWidth: 1, borderBottomWidth: 1, borderBottomColor: #cbd2d9}'

因此，您需要将其用作

<List containerStyle={{marginTop: 0}}>

多么糟糕的一个夜晚，我需要一段时间。。。非常感谢你，Pritish。这就是答案！