React Native 实现列表抽屉式效果

进入项目的跟路径添加抽屉库 npm install react-native-drawer --save

B2C9EA39-FDC7-4AB6-9338-0D76BC9BE1C3.png

//实现抽屉式效果的代码方式如下：

 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Dimensions,
  ScrollView,
  ListView,
  Image
} from 'react-native';
import Drawer from 'react-native-drawer';
var Arr = ['我的账户','转账汇款','投资理财','余额理财','工商e支付','手机充值','e缴费','信用卡','注册账户转账','贷款','融e购','融e联','Apple Pay'];
var ImageArr = [require('./1.jpg'),require('./2.jpg'),require('./3.jpg'),require('./4.jpg'),require('./5.jpg')];
const {width,height} = Dimensions.get('window');

export default class MyAnimated extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
        openType:false
    };
  }
  //接收子组件传来的数据改变openType状态，刷新UI
  LeftClicked(openType){
     this.setState({
         openType:openType
     });
  }
  //侧拉的实现方式
  render() {
    return (
      
       } //左侧拉的页面
               tapToClose={true}
               panOpenMask={0.2}
               panDrawerOffset={0.2}
               panCloseMask={0.2}
               closedDrawerOffset={0}
               open={this.state.openType}
               style={drawerStyles}
               tweenHandler={(ratio)=>({main:{opacity:(2-ratio)/2}})}>
              

       
      
    );
  }
}
// 左边侧拉栏代码实现
class LeftVC extends Component{
    render(){
        return(
         
          
            
                 我的钱包
                我的卡卷
            
         
      );
    }
}
// 首页代码列表
class Main extends Component{
   constructor(props) {
    super(props);
  
    this.state = {
        dataSource:new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2}).cloneWithRows(Arr),
    };
  }
  //cell列表
  cellClicked(data){
    return(
       
         {data}
       
    );
  }
  //滚动视图放在SectionHeader
  renderSectionHeader(){
    return(
        
            
                {this.renderImageView()}
            
        
     );
  }
  // 点击图片弹出点击的图片个数
  alertClicked(num){
    alert(num);
  }
  // for循环输出多个图片
  renderImageView(){
       var allChild = [];
        for(var i=0; i<5; i++){
           allChild.push(
             
                 
             
           )
        }
        return allChild;
  }
  //侧拉方法传入首页侧拉刷新UI
  LeftClicked(){
    this.props.LeftClicked(true);
  }
    render(){
      return(
         
            
                {this.LeftClicked()}}>
                     菜单
                
                首页
                
             
             
         
      );
   }
}
const drawerStyles = {
  drawer:{ 
     shadowColor:'#000000', 
     shadowOpacity:0.8, 
     shadowRadius:3},
     main:{
        paddingLeft:3
     },
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#EFF3F6',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('MyAnimated', () => MyAnimated);

效果图如下

QQ20170818-092402-HD.gif