[英]How to position elements to bottom of a Toolbar using DrawerNavigator for React-Native
I am using DrawerNavigator for React-Native, and inside the Drawer the following CustomDrawerContentComponent... 我正在将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);
What I want to do is position the elements of the Toolbar toward the bottom... 我想做的是将工具栏的元素朝下放置...
How does one do this..? 如何做到这一点..? (Sorry relatively new to React-Native...)
(对不起,对于React-Native来说还比较新...)
Also the code onLeftElementPress={() => this.props.navigation.goBack()} returns null for this.props.navigation. 同样,代码onLeftElementPress = {()=> this.props.navigation.goBack()}会为此this.props.navigation返回null。
Is something need to be passed in..? 是否需要传递一些东西?
Thnks. 谢谢。
Am using react-native-material-ui, so Toolbar has leftElementContainer and centerElementContainer elements. 我正在使用react-native-material-ui,因此工具栏具有leftElementContainer和centerElementContainer元素。 So they can be styled using:
因此,可以使用以下方式设置样式:
const uiTheme = {
palette: {
primaryColor: COLOR.blue500,
},
toolbar: {
container: {
height: 80,
},
leftElementContainer: {
marginTop: 20,
},
centerElementContainer: {
marginTop: 20,
},
},
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.