做过安卓原生开发的童鞋们应该都做过侧边栏这个东西,而且对于开源框架SlidingMenu和android官方侧滑菜单DrawerLayout应该都不陌生。 那么今天也在这里给大家介绍一下React-Native中的侧滑菜单DrawerLayoutAndroid和第三方框架react-native-side-menu。
封装了平台DrawerLayout(仅限安卓平台)的React组件。抽屉(通常用于导航切换)是通过renderNavigationView方法渲染的,并且DrawerLayoutAndroid的直接子视图会成为主视图(用于放置你的内容)。导航视图一开始在屏幕上并不可见,不过可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。
drawerLockMode enum(‘unlocked’, ‘locked-closed’, ‘locked-open’)
设置抽屉的锁定模式。有三种状态:
指定抽屉可以从屏幕的哪一边滑入。
drawerWidth number
指定抽屉的宽度,也就是从屏幕边缘拖进的视图的宽度。
keyboardDismissMode enum(‘none’, “on-drag”)
指定在拖拽的过程中是否要隐藏软键盘。
onDrawerClose function
每当导航视图(抽屉)被关闭之后调用此回调函数。
onDrawerOpen function
每当导航视图(抽屉)被打开之后调用此回调函数。
onDrawerSlide function
每当导航视图(抽屉)产生交互的时候调用此回调函数。
onDrawerStateChanged function
每当抽屉的状态变化时调用此回调函数。抽屉可以有3种状态:
renderNavigationView function
此方法用于渲染一个可以从屏幕一边拖入的导航视图。
class hello extends Component{
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor:'blue'}}>
<Text style={{margin: 10, fontSize:15, textAlign: 'left'}}>I'm in the Drawer!</Text>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={200}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() =>navigationView}>
<View style={{flex: 1, alignItems:'center'}}>
<Text style={{margin: 10, fontSize:15, textAlign: 'right'}}>Hello</Text>
<Text style={{margin: 10, fontSize:15, textAlign: 'right'}}>World!</Text>
</View>
</DrawerLayoutAndroid>
);
}
}
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
TouchableOpacity,
ViewPagerAndroid,
ScrollView,
Navigator,
View,
ListView,
Dimensions,
WebView,
ToastAndroid,
DrawerLayoutAndroid,
} from 'react-native';
const{width,height} = Dimensions.get('window')
class hello extends Component{
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor:'blue'}}>
<TouchableOpacity onPress={this.close}>
<Text style={[styles.textStyle, styles.textSmall]}>点击关闭侧边栏</Text>
</TouchableOpacity>
</View>
);
return (
<DrawerLayoutAndroid
ref={(drawer) => { this.drawer = drawer; }}
drawerWidth={200}
onDrawerClose={this.handleDrawerClose}
onDrawerOpen={this.handleDrawerOpen}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() =>navigationView}>
<View style={[styles.textContainer,styles.drawerStyle]}>
<Text style={[styles.textStyle, styles.textLarge]} /** 当一个组件需要使用多个style样式时,需要用[]将样式括起来 */ >抽屉</Text>
<Text style={[styles.textStyle, styles.textLarge]}>高逼格 相当简单!</Text>
<Text style={[styles.textStyle, styles.textSmall]}>从左侧拖出策划菜单</Text>
<TouchableOpacity onPress={this.open}>
<Text style={[styles.textStyle, styles.textSmall]}>点击打开侧边栏</Text>
</TouchableOpacity>
</View>
</DrawerLayoutAndroid>
);
}
handleDrawerOpen=()=> {
//使用ToastAndroid组件弹出一个原生的Toast
ToastAndroid.show("open drawer", ToastAndroid.SHORT);
}
handleDrawerClose=()=>{
ToastAndroid.show("close drawer", ToastAndroid.SHORT);
}
open=()=>{
this.drawer.openDrawer();
}
close=()=>{
this.drawer.closeDrawer();
}
}
const styles = StyleSheet.create({
drawerStyle: {
backgroundColor: '#6699FF'
},
textContainer: {
flex: 1,
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'center',
},
textStyle: {
margin: 10,
color: 'white',
textAlign: 'center'
},
textSmall: {
fontSize: 15,
},
textLarge: {
fontSize: 35,
}
})
AppRegistry.registerComponent('hello', () => hello);
项目地址: https://github.com/react-native-community/react-native-side-menu
npm install react-native-side-menu --save
安装好后再package.json中可以看到如下配置:
引入:
import SideMenu from 'react-native-side-menu';
使用:
import SideMenu from 'react-native-side-menu';
class ContentView extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+Control+Z for dev menu
</Text>
</View>
);
}
}
class Application extends React.Component {
render() {
const menu = <Menu navigator={navigator}/>;
return (
<SideMenu menu={menu}>
<ContentView/>
</SideMenu>
);
}
}
代码: 首页代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Image,
TouchableOpacity,
ViewPagerAndroid,
ScrollView,
Navigator,
View,
ListView,
Dimensions,
WebView,
ToastAndroid,
Button,
DrawerLayoutAndroid,
} from 'react-native';
import SideMenu from 'react-native-side-menu';
import Menu from './Menu.js'; //导入菜单组件
const uri_image_menu = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/17351665220160605093956066.png';
const{width,height} = Dimensions.get('window')
class hello extends Component{
constructor(props) {
super(props);
this.state = {
isOpen : false,
selectedItem:'About',
};
}
toggle(){
ToastAndroid.show('toggle', ToastAndroid.SHORT);
this.setState({
isOpen: !this.state.isOpen,
});
}
updateMenuState(isOpen){
this.setState({isOpen : isOpen
});
}
onMenuItemSelected = (item) =>{
this.setState({
isOpen :false,
selectedItem:item,
});
}
render(){
const menu = <Menu onItemSelected = {this.onMenuItemSelected}/>
return(
<SideMenu
menu={menu}
isOpen = {this.state.isOpen}
onChange={(isOpen) => this.updateMenuState(isOpen)}
>
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={[styles.instructions, { color: 'red' }]}>
当前选中的菜单是: {this.state.selectedItem}
</Text>
</View>
<Button style={styles.button} onPress={() => this.toggle() } title="我是button,点击打开侧边栏" >
<Image
source={{ uri: uri_image_menu, width: 32, height: 32, }} />
</Button>
</SideMenu>
);
}
}
const styles = StyleSheet.create({
button: {
position: 'absolute',
top: 20,
padding: 10,
},
caption: {
fontSize: 20,
fontWeight: 'bold',
alignItems: 'center',
},
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('hello', () => hello);
侧边栏代码:
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Dimensions,
ScrollView,
Text,
Image,
View,
} from 'react-native'
const window = Dimensions.get('window');
const uri = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/1735166522016060509185507.png';
export default class Menu extends Component{
static propTypes = {
onItemSelected: React.PropTypes.func.isRequired,
};// 注意这里有分号
render(){
return(
<ScrollView scrollsToTop={false} style={styles.menu}>
<View style={styles.avatarContainer}>
<Image
style={styles.avatar}
source={{ uri:uri }}/>
<Text style={styles.name}>相濡以沫</Text>
</View>
<Text
onPress={() => this.props.onItemSelected('啦啦啦') }
style={styles.item}>
啦啦啦
</Text>
<Text
onPress={() => this.props.onItemSelected('点点我')}
style={styles.item}>
点点我
</Text>
<Text
onPress={() => this.props.onItemSelected('抱抱我')}
style={styles.item}>
抱抱我
</Text>
<Text
onPress={() => this.props.onItemSelected('亲亲我')}
style={styles.item}>
亲亲我
</Text>
<Text
onPress={() => this.props.onItemSelected('啃啃我')}
style={styles.item}>
啃啃我
</Text>
<Text
onPress={() => this.props.onItemSelected('拽拽我')}
style={styles.item}>
拽拽我
</Text>
<Text
onPress={() => this.props.onItemSelected('闪闪我')}
style={styles.item}>
闪闪我
</Text>
<Text
onPress={() => this.props.onItemSelected('照照我')}
style={styles.item}>
照照我
</Text>
<Text
onPress={() => this.props.onItemSelected('戳戳我')}
style={styles.item}>
戳戳我
</Text>
<Text
onPress={() => this.props.onItemSelected('赞赞我')}
style={styles.item}>
赞赞我
</Text>
<Text
onPress={() => this.props.onItemSelected('夸夸我')}
style={styles.item}>
夸夸我
</Text>
<Text
onPress={() => this.props.onItemSelected('看看我')}
style={styles.item}>
看看我
</Text>
<Text
onPress={() => this.props.onItemSelected('卡卡我')}
style={styles.item}>
卡卡我
</Text>
<Text
onPress={() => this.props.onItemSelected('呼呼我')}
style={styles.item}>
呼呼我
</Text>
<Text
onPress={() => this.props.onItemSelected('点点我')}
style={styles.item}>
点点我
</Text>
<Text
onPress={() => this.props.onItemSelected('抱抱我')}
style={styles.item}>
抱抱我
</Text>
<Text
onPress={() => this.props.onItemSelected('亲亲我')}
style={styles.item}>
亲亲我
</Text>
<Text
onPress={() => this.props.onItemSelected('啃啃我')}
style={styles.item}>
啃啃我
</Text>
<Text
onPress={() => this.props.onItemSelected('拽拽我')}
style={styles.item}>
拽拽我
</Text>
<Text
onPress={() => this.props.onItemSelected('闪闪我')}
style={styles.item}>
闪闪我
</Text>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
menu: {
flex: 1,
width: window.width,
height: window.height,
backgroundColor: 'gray',
padding: 20,
},
avatarContainer: {
marginBottom: 20,
marginTop: 20,
},
avatar: {
width: 48,
height: 48,
borderRadius: 24,
flex: 1,
},
name: {
position: 'absolute',
left: 70,
top: 20,
},
item: {
fontSize: 16,
fontWeight: '300',
paddingTop: 10,
},
});