一. 简介
开发项目中可能会有用到侧边栏，今天说一下react-native-side-menu
.github地址:https://github.com/react-native-community/react-native-side-menu
二.使用
导入
项目根目录下使用命令行 npm install react-native-side-menu --save
项目代码中import
import SideMenu from 'react-native-side-menu';
示例
const uri_image_menu = 'http://image18-c.poco.cn/mypoco/myphoto/20160605/09/17351665220160605093956066.png'; class HomeUI extends Component { constructor(props) { super(props);//这一句不能省略，照抄即可 this.state={ // selectedTab:'home' isOpen:false, selectedItem:'About' } } toggle(){ this.setState({ isOpen:!this.state.isOpen, }); } onMenuItemSelected = (item) =>{ this.setState({ isOpen: false , selectedItem:item , }); } updateMenuState(isOpen){ this.setState({ isOpen:isOpen, }) } 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.instructions, { color: 'red' }]}> 当前选中的菜单是: {this.state.selectedItem} </Text> </View> <Button style={styles.button} onPress={()=>this.toggle()}> <Image source={{uri:uri_image_menu, width:60,height:60}}/> </Button> </SideMenu> ); } } class Button extends Component{ _handlePress(e){ if(this.props.onPress){ this.props.onPress(e); } } render(){ return ( <TouchableOpacity onPress={this._handlePress.bind(this)} style={this.props.style}> <Text>{this.props.children}</Text> </TouchableOpacity> ); } } const styles = StyleSheet.create({ flex:{ flex:1, }, center:{ justifyContent:'center', alignItems:'center' }, img: { width: 40, height: 33, }, button:{ position:'absolute', padding:20, top:20 }, container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
侧边栏菜单单独拿出来写在了一个js文件中 ，在主界面中导入
import Menu from './Menu.js';
Menu.js代码
const window = Dimensions.get('window'); const AvatarUri = "http://cdn-qn0.jianshu.io/assets/default_avatar/3-9a2bcc21a5d89e21dafc73b39dc5f582.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"; export default class Menu extends Component{ static propTypes={ onItemSelected:React.PropTypes.func.isRequired, }; render (){ return ( <ScrollView style={styles.menu} scrollsToTop={false}> <View style={styles.avatarContainer}> <Image style={styles.avatar} source={{uri:AvatarUri}} /> <Text style={styles.nickName}>飞奔的小马</Text> </View> <Text style={styles.item} onPress={()=>this.props.onItemSelected('我的收藏')}>我的收藏</Text> <Text style={styles.item} onPress={()=>this.props.onItemSelected('我的文章')}>我的文章</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:50, height:50, borderRadius:20, }, nickName:{ position:'absolute', left:70, top:20, fontSize:18, }, item:{ fontSize:16, fontWeight:'300', paddingTop:10, } });
效果
点击左上角按钮或者从左边沿向右拽都能将侧边栏拉出来
同样点击左上角按钮或点击主界面空白处都能掩藏侧边栏。
背景色可以按需求调节。
