React native 如何使用React Native的DroperNavigator将元素定位到工具栏底部

React native 如何使用React Native的DroperNavigator将元素定位到工具栏底部,react-native,flexbox,toolbar,side-menu,React Native,Flexbox,Toolbar,Side Menu,我正在为React Native使用DrawerNavigator,抽屉中有以下CustomDrawerContentComponent const uiTheme = { palette: { primaryColor: COLOR.blue500, }, toolbar: { container: { height: 80, }, }, }; const propTypes = { navigation: PropTypes.shap

我正在为React Native使用DrawerNavigator,抽屉中有以下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);
const-uiTheme={
调色板:{
primaryColor:COLOR.blue500,
},
工具栏:{
容器:{
身高:80,
},
},
};
常量属性类型={
导航:PropTypes.shape({
goBack:PropTypes.func.isRequired,
}).要求,
};
const CustomDrawerContentComponent=props=>(
this.props.navigation.goBack()}
centerElement=“菜单”
/>
this.props.navigation.goBack()}
为this.props.navigation返回null

有什么东西需要传进来吗


Thnks.

Am使用react native material ui,因此工具栏具有leftElementContainer和centerElementContainer元素。因此,可以使用以下元素设置其样式:

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