在本机应用程序中实现来自本机库的抽屉-Java 学习之路

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

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

2 回答

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

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 之类的东西，否则它看起来很奇怪 .

回复于 2024-05-21T17:04:30+08:00

我正在为那些不熟悉使用本机开发应用程序的人写答案 . 对于这个答案，我将使用的两个重要事项也与问题相关，它们是 react-navigation and 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，我们在主屏幕中获得滑动菜单，Sidebar是一个简单的组件，可以根据需要提供所需的东西 . 现在，对于主屏幕，我们将有一个按钮，允许用户从任何地方打开菜单 .

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”，“react-navigation”：“^ 3.0.8”，

我希望这对任何打算实现抽屉并启用导航的人都有帮助 .

回复于 2024-05-21T17:04:30+08:00

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

2 回答

相关问题