6

我需要使用来自本机基础的抽屉来为 android ios et 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>
        );
    }

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

4

2 回答 2

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>
    );
}

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

于 2017-03-17T11:30:45.507 回答
2

我正在为任何不熟悉使用 react native 开发应用程序的人写答案，对于这个答案，我将使用的重要内容是react-navigation。

首先是 app.js，我们在其中声明抽屉和其他屏幕，其中包括没有抽屉菜单的登录屏幕。authLoading Screen 用于根据用户是否经过身份验证将用户导航到登录或主屏幕。

应用程序.js 

const HomeScreenRouter = createDrawerNavigator(
  {
    Home: { screen: HomeScreen }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);


const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: HomeScreenRouter,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

使用 contentComponent 我们在主屏幕中获得滑动菜单，侧边栏是一个简单的组件，可以根据需要进行操作。现在对于主屏幕，我们将有一个按钮，它还允许用户从任何地方打开菜单。

class HomeScreen extends React.Component {

    render() {
        return (

        <Container>
        <Header>
      <Left>
        <Button
          transparent
          onPress={() => this.props.navigation.openDrawer()}>
          <Icon name="menu" />
        </Button>
      </Left>
      <Body>
        <Title>Be-in</Title>
      </Body>
      <Right />
    </Header>
             <Content>

             </Content>
        </Container>

        );
    }

}
export default HomeScreen

本例中使用的版本是

"react": "16.6.1",
"react-native": "0.57.7",
"react-navigation": "^3.0.8",

我希望它对任何打算实现抽屉并启用导航的人有所帮助。

于 2018-12-14T15:02:21.540 回答