- DrawerLayoutAndroid:
抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且 DrawerLayoutAndroid 的直接子视图会成为主视图（用于放置内容）。导航视图一开始在屏幕上并不可见，不过可以从drawerPosition指定的窗口侧面拖拽出来，并且抽屉的宽度可以使用drawerWidth属性来指定。
译注：此组件仅能在 Android 上使用。我们推荐使用跨平台的react-navigation中的 DrawerNavigation 来代替此组件。
直接上代码
import React from 'react';
import {ToastAndroid, Text, View, DrawerLayoutAndroid, TouchableOpacity, StyleSheet} from 'react-native';
export default class FetchExample extends React.Component {
constructor(props) {
super(props);
this.state = {isLoading: true}
}
open = () => {
this.drawer.openDrawer();
}
close = () => {
this.drawer.closeDrawer();
}
render() {
let navigationView = (
<View style={{flex: 1, backgroundColor: 'skyblue'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
<TouchableOpacity onPress={this.close}>
<Text style={[styles.textStyle, styles.textSmall]}>点击关闭侧边栏</Text>
</TouchableOpacity>
</View>
);
return (
<DrawerLayoutAndroid
ref={(drawer) => {
this.drawer = drawer;
}}
//
drawerWidth={300}
// 设置导航视图从窗口边缘拉入的视图的宽度。
drawerPosition={DrawerLayoutAndroid.positions.Left}
// 设置导航视图从屏幕的哪一边拉入。
renderNavigationView={() => navigationView}
// 被拉入的导航视图的内容。
onDrawerClose={() => {
ToastAndroid.show("close drawer", ToastAndroid.SHORT)
}}
// 导航视图被关闭后的回调函数。
keyboardDismissMode='none'
// 设置拖动过程中是否隐藏软键盘,'none' (默认)，拖动时不隐藏软键盘。'on-drag'，拖动时隐藏软键盘。
onDrawerOpen={() => {
ToastAndroid.show("open drawer", ToastAndroid.SHORT);
}}
// 导航视图被打开后的回调函数。
>
<View style={{flex: 1, alignItems: "center"}}>
<Text style={{margin: 10, fontSize: 15,}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15,}}>World!</Text>
<TouchableOpacity onPress={this.open}>
<Text style={styles.textStyle}>点击打开侧边栏</Text>
</TouchableOpacity>
</View>
</DrawerLayoutAndroid>
);
}
}
const styles = StyleSheet.create({
textStyle: {
margin: 10,
color: 'red',
textAlign: 'center',
fontSize:15,
},
textSmall: {
fontSize: 25,
},
})
- react-navigation之DrawerNavigator使用方法
api:StackNavigator(RouteConfigs, StackNavigatorConfig)
RouteConfigs（路由配置）
StackNavigatorConfig（相关选项）-
initialRouteName设置栈中的默认显示路由（页面），必须匹配路由配置中的一个键值 -
initialRouteParams默认路由的参数 -
navigationOptions用于屏幕的默认导航选项 -
paths覆盖路由配置中设置的 path -
mode- 定义渲染和页面切换的风格，以下两个选项是其可以使用的两个枚举值，下面同理：
1 .card - 使用标准的 iOS 和 Android 屏幕切换风格。这是默认的。
2 .modal - 使屏幕从底部滑入，这是一种常见的 iOS 模式。只适用于 iOS，对 Android 没有任何影响。 -
headerMode- 指定标题栏的渲染方式：
1 .float - 在页面切换时渲染一个固定在顶部的单个标题栏和动画。这是 iOS 上的常见模式。
2 .screen - 每个页面都有各自的标题栏，并且伴随着页面切换一起淡入淡出。这是 Android 上的常见模式。
3 .none - 不渲染标题栏，当你需要自定义标题栏的时候，可以设置这个选项。 -
cardStyle- 使用这个属性重写或继承栈中单个卡片（页面）的默认样式。
1 .transitionConfig - 返回值是与默认页面切换相关的对象的函数。提供的函数将传递以下参数：
2 .transitionProps - 给新页面的切换相关属性。
3 .prevTransitionProps - 给旧页面的切换相关属性。 -
isModal- 切换风格是否是 modal。
1 .onTransitionStart - 当切换动画开始时调用的函数。
2 .onTransitionEnd - 当切换动画结束时调用的函数。
-
举个栗子：
import React, {Component} from 'react';
import FirstPage from './FirstPage';
import {
DrawerNavigator
} from 'react-navigation';
export default class Pages extends Component {
constructor(props) {
super(props);
}
render() {
return (
<SimpleAppNavigator/>
)
}
}
const SimpleAppNavigator = DrawerNavigator({
page1: {screen: FirstPage},
},
{
initialRouteParams: {user: 'hello'},
initialRouteName: 'page1',
navigationOptions: {
title: 'Hello Navigation!'
},
}
);
//first 组件页面
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
export default class SecondPage extends Component {
render() {
const {params} = this.props.navigation.state;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{params.user} world!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
textView: {
fontSize: 16,
textAlign: 'center',
margin: 10,
color:'red'
},
});
