实现抽屉导航如下:
createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
RouteConfigs
路由配置对象
DrawerNavigatorConfig
- drawerWidth:抽屉的宽度或者返回宽度值的函数
- drawerPosition:抽屉出现的位置,
left
或right
。默认是left
位置。 - contentComponent:用于呈现抽屉内容的组件,例如导航项。接收navigation的props。默认为DrawerItems。
- useNativeAnimations:启用动画,默认为
true
。 - drawerBackgroundColor:抽屉的背景色,默认为
true
。 - initialRouteName:初始路由名称。
- order:定义路由顺序的routeNames数组。
- paths:提供routeName到path config的映射,它覆盖routeConfigs中设置的路径。(使用场景在前几篇文章有,不再赘述)
- backBehavior:点击后退按钮是否将标签切换到初始选项卡。如果是,则设置为
initialRoute
,否则none。默认为initialRoute
行为。 - contentOptions:配置抽屉内容,
DrawerItems
的contentOptions
属性items
– 路由数组,可以修改或覆盖activeItemKey
– 激活的路由keyactiveTintColor
– 活动标签的标签和图标颜色activeBackgroundColor
– 活动标签的背景颜色inactiveTintColor
– 非活动标签的标签和图标颜色inactiveBackgroundColor
– 非活动标签的背景颜色onItemPress(route)
– 按下某个项目时调用的函数itemsContainerStyle
– 内容部分的样式对象itemStyle
– 单个项目的样式对象,其中可以包含图标和/或标签labelStyle
– Text当你的标签是一个字符串时,样式对象覆盖内容部分的样式activeLabelStyle
– 样式对象覆盖Text活动标签的样式,当标签是一个字符串(与labelStyle合并)inactiveLabelStyle
– 样式对象覆盖Text不活动标签的样式,当标签是一个字符串(与labelStyle合并)iconContainerStyle
– 样式对象来覆盖View图标容器样式。
自定义contentComponent
抽屉的默认组件支持滚动,只包含了RouteConfig中路由的链接。在自定义组件中,可以向抽屉中添加页眉、页脚或其他内容。默认情况下,抽屉支持iphone X安全区域。(SafeAreaView目前官方文档v0.55版本中显示只支持ios,并未支持android机型的刘海屏)
import { DrawerItems, SafeAreaView } from 'react-navigation';
const CustomDrawerContentComponent = (props) => (
<ScrollView>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
<DrawerItems {...props} />
</SafeAreaView>
</ScrollView>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Screen Navigation Options
title
:通用标题可以用作备用headerTitle
和drawerLabel
drawerLabel
:字符串,React元素或给定的函数({ focused: boolean, tintColor: string }
)返回React.Node,以显示在抽屉边栏中。未设置时,使用title
drawerIcon
:React元素或给定的函数({ focused: boolean, tintColor: string }
)返回一个React.Node,以显示在抽屉边栏中
drawerLockMode
:指定抽屉的lock mode。这也可以通过在顶级路由器上使用screenProps.drawerLockMode动态更新。
示例
class MyHomeScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Home',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./chats-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('Notifications')}
title="Go to notifications"
/>
);
}
}
class MyNotificationsScreen extends React.Component {
static navigationOptions = {
drawerLabel: 'Notifications',
drawerIcon: ({ tintColor }) => (
<Image
source={require('./notif-icon.png')}
style={[styles.icon, {tintColor: tintColor}]}
/>
),
};
render() {
return (
<Button
onPress={() => this.props.navigation.goBack()}
title="Go back home"
/>
);
}
}
const styles = StyleSheet.create({
icon: {
width: 24,
height: 24,
},
});
const MyApp = DrawerNavigator({
Home: {
screen: MyHomeScreen,
},
Notifications: {
screen: MyNotificationsScreen,
},
});
要打开和关闭抽屉,navigate toDrawerOpen
和DrawerClose
。
this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer
切换抽屉navigate to DrawerToggle
// fires 'DrawerOpen'/'DrawerClose' accordingly
this.props.navigation.navigate('DrawerToggle');
最新评论
Nignx主要是后台做负载用,没想到你也这么用心
这个评论虽然不能一针见血,但是喜欢这个文章,一直喜欢这个时间管理法。很好
优秀
你对加密的定义很严谨,在平时及网络各种文章中,通常将 base64 称之为“加密”,上面及文章中提到的“加密”同样是这个意思,并非严格意义的加密。严格讲 base64 是一种编码方式。感谢你的回复。
严格意义上来说 base64 不算是加密(Encryption),而是一种编码形式(Encoding)。对于 UTF-8 这种也可以叫它为 Encoding。 加密(Encryption)是指像 R
Base64: 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符,避免不可见字符。 MD5: 不可逆性。 任意长度的明文字符串,加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用?
正则规则的原理可以多说一些