Question

我需要使用从原生基地的抽屉到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>
        );
    }

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

Answer 1

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

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

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

Answer 2

我正在为任何使用React Native开发应用程序的新手编写答案，为此答案，我将使用两个与问题相关的重要内容，它们是 react-navigation和native -base 。

首先是app.js，在其中声明抽屉，其他屏幕包括没有抽屉菜单的登录屏幕。 authLoading屏幕用于根据用户是否通过身份验证来导航用户以登录或进入主屏幕。

App.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

本示例中使用的

版本是

“ native-base”：“ ^ 2.8.1”， “ react”：“ 16.6.1”， “ react-native”：“ 0.57.7”， “反应导航”：“ ^ 3.0.8”，

我希望这对打算实现抽屉并启用导航功能的人有所帮助。

在本机应用程序中实现来自本机库的抽屉

2 个答案: