在本机应用程序中从本机基础实现抽屉

Question

在本机应用程序中从本机基础实现抽屉

use*_*011 6 android ios react-native native-base

我需要使用原生库中的抽屉来为 android ios 和 android 响应原生应用程序。这是本机基础http://nativebase.io/docs/v2.0.0/components#drawer的链接，在下面你会找到我的代码：

import { Container, Header, Title, Content, Button, Icon, Left,  Body, Text } from 'native-base';
import { Drawer } from 'native-base';    
import SideBar from '../components/SideBar';   
class App extends Component {
        closeDrawer = () => {
        this._drawer._root.close();
    }
    openDrawer = () => {
        alert('open');
        this._drawer._root.open();
    }
    render() {   
        return (
            <Container>
                <Header style={{ backgroundColor: '#C0C0C0' }}>
                    <Left>
                        <Button transparent onPress={this.openDrawer.bind(this)}>
                            <Icon style={style.icon} name='menu'  />
                        </Button>    
                    </Left>
                    <Body style={style.body}>
                    <Title style={{ color: '#FFF'}}> title </Title>
                    </Body>   
                </Header>
                 <Content>
                     <Drawer
                    ref={(ref) => { this._drawer = ref; }}
                    content={<SideBar />} >
                    </Drawer>
                </Content>

            </Container>
        );
    }

Run Code Online (Sandbox Code Playgroud)

方法打开抽屉中的警报工作正常，所以我知道这不是按钮的问题。

Answer 1

css*_*sko 7

我相信你想把所有的东西都包在抽屉里，就像这样

render() {   
    return (
      <Drawer
        ref={(ref) => { this._drawer = ref; }}
        content={<SideBar />} >
        <Container>
            <Header style={{ backgroundColor: '#C0C0C0' }}>
                <Left>
                    <Button transparent onPress={this.openDrawer.bind(this)}>
                        <Icon style={style.icon} name='menu'  />
                    </Button>    
                </Left>
                <Body style={style.body}>
                <Title style={{ color: '#FFF'}}> title </Title>
                </Body>   
            </Header>
             <Content>
               // Your other content here
            </Content>
        </Container>
      </Drawer>
    );
}

Run Code Online (Sandbox Code Playgroud)

此外，在您自制的侧边栏组件上 - 确保它具有 backgroundColor。将它设置为类似的东西，#F0F0F0否则它最终看起来很奇怪。

归档时间：	8 年，9 月前
查看次数：	12295 次
最近记录：	6 年前