我使用 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()} >
这是我的 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;