Question

我试图将NativeBase抽屉放在所有东西的顶部，但它一直在按顺序下降，像这样。

这是代码：

renderDrawer = () => {

    return (
        <Drawer style={{ zIndex: 5 }}
            ref={(ref) => { this.drawer = ref; }}
            content={
                <Content style={styles.drawerContect}>
                    <Card>
                        <CardItem style={styles.bioContainer}>
                            <Left>
                                <Thumbnail source={{
                                    uri: '#imgPath'
                                }} />
                                <Body>
                                    <Text>Hamza Khan</Text>
                                </Body>
                            </Left>
                        </CardItem>
                    </Card>
                    <Content>
                        <Separator bordered>
                            <Text>General</Text>
                        </Separator>
                        <ListItem icon>
                            <Left>
                                <Button style={{ backgroundColor: "green" }}>
                                    <Icon active name="home" />
                                </Button>
                            </Left>
                            <Body>
                                <Text>Home</Text>
                            </Body>
                        </ListItem>
                    </Content>
                </Content>
            }
            onClose={() => this.closeDrawer} >
        </Drawer>
    );
}

和样式表：

const styles = StyleSheet.create({
drawerContect: {
    backgroundColor: "white",
},
bioContainer: {
    backgroundColor: "#E5E5E5",
},
searchBox: {
    width: "95%",
    justifyContent: "space-evenly",
    marginLeft: "2%",
    zIndex: 1,
}

}）

请告诉我我做错了什么，我可以做些什么来解决。

Answer 1

这样定义您的AppDrawerNavigator

const AppDrawerNavigator = createDrawerNavigator({ 
  Home: {
    screen: HomeStack
  },
  Profile: {
    screen: ProfileStack
  },
  Settings: {
    screen: SettingsStack
  }
}, {
    header: null,
    contentComponent: homeDrawerComponent
  }, {
    contentOptions: {
      header: null,
      activeTintColor: '#0094FFFF'
    }
  });

并像这样定义homeDrawerComponent

class homeDrawerComponent  extends Component {

  render(){

    return (
      <Drawer style={{ zIndex: 5 }}
            ref={(ref) => { this.drawer = ref; }}
            content={
                <Content style={styles.drawerContect}>
                    <Card>
                        <CardItem style={styles.bioContainer}>
                            <Left>
                                <Thumbnail source={{
                                    uri: '#imgPath'
                                }} />
                                <Body>
                                    <Text>Hamza Khan</Text>
                                </Body>
                            </Left>
                        </CardItem>
                    </Card>
                    <Content>
                        <Separator bordered>
                            <Text>General</Text>
                        </Separator>
                        <ListItem icon>
                            <Left>
                                <Button style={{ backgroundColor: "green" }}>
                                    <Icon active name="home" />
                                </Button>
                            </Left>
                            <Body>
                                <Text>Home</Text>
                            </Body>
                        </ListItem>
                    </Content>
                </Content>
            }
            onClose={() => this.closeDrawer} >
        </Drawer>
    )
  }
}

如何将NativeBase Drawer放在一切之上

1 个答案: