如何使用 DrawerNavigator for React-Native 将元素定位到工具栏的底部

Posted

技术标签:

【中文标题】如何使用 DrawerNavigator for React-Native 将元素定位到工具栏的底部【英文标题】:How to position elements to bottom of a Toolbar using DrawerNavigator for React-Native 【发布时间】:2018-07-04 21:54:26 【问题描述】:

我将 DrawerNavigator 用于 React-Native,并在 Drawer 内使用以下 CustomDrawerContentComponent...

const uiTheme = 
  palette: 
    primaryColor: COLOR.blue500,
  ,
  toolbar: 
    container: 
      height: 80,
    ,
  ,
;

const propTypes = 
  navigation: PropTypes.shape(
    goBack: PropTypes.func.isRequired,
  ).isRequired,
;

const CustomDrawerContentComponent = props => (
  <Container>
    <Toolbar
      leftElement="arrow-back"
      onLeftElementPress=() => this.props.navigation.goBack()
      centerElement="Menu"
    />
    <View>
      <Drawer.Header>
        <Drawer.Header.Account
          avatar=<Avatar text="K" />
          footer=
            dense: true,
            centerElement: 
              primaryText: 'Account',
              secondaryText: 'xxxx@yahoo.com',
            ,
            rightElement: 'arrow-drop-down',
          
        />
      </Drawer.Header>
      <DrawerItems ...props />
    </View>
  </Container>
);

const MainRoot = DrawerNavigator(
  
    Login: 
      path: '/login',
      screen: Login,
    ,
    Profile: 
      path: '/profile',
      screen: Profile,
    ,
    Settings: 
      path: '/settings',
      screen: Settings,
    ,
  ,
  
    initialRouteName: 'Settings',
    contentOptions: 
      activeTintColor: '#2089b0',
      activeBackgroundColor: 'transparent',
      inactiveTintColor: '#000000',
      inactiveBackgroundColor: 'transparent',
      labelStyle: 
        fontSize: 18,
        marginLeft: 0,
        fontFamily: 'sans-serif-thin',
      ,
    ,
    drawerWidth: SCREEN_WIDTH * 0.8,
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: 'DrawerOpen',
    drawerCloseRoute: 'DrawerClose',
    drawerToggleRoute: 'DrawerToggle',
  
);

export default class AppContainer extends Component 
  render()     
    return (
      <ThemeContext.Provider value=getTheme(uiTheme)>
        <MainRoot />
      </ThemeContext.Provider>
    );
  


Expo.registerRootComponent(AppContainer);

我想要做的是将工具栏的元素定位到底部...

Side Menu

如何做到这一点..? (抱歉,React-Native 相对较新...)

还有代码 onLeftElementPress=() => this.props.navigation.goBack() 为 this.props.navigation 返回 null。

有什么需要传入的吗..?

谢谢。

【问题讨论】:

【参考方案1】:

我使用的是 react-native-material-ui,所以 Toolbar 有 leftElementContainer 和 centerElementContainer 元素。因此可以使用以下方式设置它们的样式:

const uiTheme = 
  palette: 
    primaryColor: COLOR.blue500,
  ,
  toolbar: 
    container: 
      height: 80,
    ,
    leftElementContainer: 
      marginTop: 20,
    ,
    centerElementContainer: 
      marginTop: 20,
    ,
  ,
;

【讨论】:

以上是关于如何使用 DrawerNavigator for React-Native 将元素定位到工具栏的底部的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React-Native 中设置 DrawerNavigator 的背景图片?

使用 DrawerNavigator [React native] 导航到 URL/Deep Link

使用 react Native DrawerNavigator 注销

结合 TabNavigator 和 Drawernavigator

react-navigation 的抽屉效果 createDrawerNavigator (DrawerNavigator)

使用DrawerNavigator作为主UI,应用程序始终输入默认项目屏幕而不显示抽屉项目