如何使用 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)