Question

我使用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;

Answer 1

如List index.d.ts所述，容器的默认样式为

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

因此您需要将其用作

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

为什么抽屉里有空背景？

1 个答案: