反应本机,反应本机路由器流量&抽屉上的自定义图标不工作

我所做的是立足于 nativebase 而且 example .

1. 添加重复

   

   DrawRactions.js

   import type { Action } from './types';
   
   const OPEN_DRAWER = 'open_drawer';
   const CLOSE_DRAWER = 'close_drawer';
   
   export function openDrawer():Action {
     return {
       type: OPEN_DRAWER,
     };
   }
   
   export function closeDrawer():Action {
     return {
       type: CLOSE_DRAWER,
     };
   }
   

drawerReducer.js

import type { Action } from '../actions/types';

export const OPEN_DRAWER = 'open_drawer';
export const CLOSE_DRAWER = 'close_drawer';

export type State = {
    drawerState: string,
    drawerDisabled: boolean
}

const initialState = {
  drawerState: 'closed',
  drawerDisabled: true,
};

export default function (state:State = initialState, action:Action): State {
  if (action.type === OPEN_DRAWER) {
    return {
      ...state,
      drawerState: 'opened',
    };
  }

  if (action.type === CLOSE_DRAWER) {
    return {
      ...state,
      drawerState: 'closed',
    };
  }

  return state;
}

1. 使用react redux,我连接了 sideDrawer.js 组成部分 从“React”导入React,{Component,PropTypes}; 从“react redux”导入{connect};

   import {
     BackAndroid,
     StyleSheet,
     Text,
     View,
   } from 'react-native';
   import { Drawer } from 'native-base';
   
   import { DefaultRenderer, Actions } from 'react-native-router-flux';
   import SideBar from './sidebar';
   import { closeDrawer } from '../actions';
   
   const propTypes = {
     navigationState: PropTypes.object,
   };
   
   class SideDrawer extends Component {
     static propTypes = {
       closeDrawer: React.PropTypes.func,
       drawerState: React.PropTypes.string,
     }
   
     constructor(props) {
       super(props);
       this.state = {
         animatingLoadingSpinner: false,
         url: 'polls',
       };
     }
   
     componentDidMount() {
       BackAndroid.addEventListener('hardwareBackPress', () => {
         Actions.pollCreation();
       });
       Actions.refresh({ key: 'drawer', ref: this.refs.navigation });
     }
   
     componentDidUpdate() {
       if (this.props.drawerState === 'opened') {
         this.openDrawer();
       }
   
       if (this.props.drawerState === 'closed') {
         this.refs.navigation.close();
       }
     }
   
     openDrawer() {
       this.refs.navigation.open();
     }
   
     closeDrawer() {
       console.log(`onClose: ${this.props.drawerState}`);
   
       if (this.props.drawerState === 'opened') {
         this.props.closeDrawer();
       }
     }
   
     finishSpinnerAnimation() {
       this.setState({
         animatingLoadingSpinner: false
       });
     }
   
     startSpinnerAnimation() {
       this.setState({
         animatingLoadingSpinner: true
       });
     }
   
   
     noServerConnection() {
       return (
         <View style={styles.errorBody} >
           <Text > No es posible la conexión con Nuestros servidores </Text>
         </View>
       );
     }
   
     render() {
       const state = this.props.navigationState;
       const children = state.children;
       return (
         <View style={styles.container} >
           <Drawer
             ref='navigation'
             type="overlay"
             tweenDuration={150}
             content={
               <SideBar
                 closeDrawer={() => this.closeDrawer()}
               />
             }
             tapToClose
             acceptPan={false}
             openDrawerOffset={0.2}
             panCloseMask={0.2}
             styles={{
               drawer: {
                 shadowColor: '#000000',
                 shadowOpacity: 0.8,
                 shadowRadius: 3,
               },
             }}
             tweenHandler={(ratio) => {  // eslint-disable-line
               return {
                 drawer: { shadowRadius: ratio < 0.2 ? ratio * 5 * 5 : 5 },
                 main: {
                   opacity: (2 - ratio) / 2,
                 },
               };
             }}
             negotiatePan
             onCloseStart={this.closeDrawer.bind(this)}
           >
             <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
           </Drawer>
         </View>
       );
     }
   
   }
   
   const BGWASH = '#F6F6F6';
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       backgroundColor: BGWASH,
     },
     addressBarRow: {
       flexDirection: 'row',
       height: 10,
     },
     errorBody: {
       alignItems: 'center',
       justifyContent: 'center',
     },
     navButton: {
       alignItems: 'flex-end',
       flex: 1,
     },
     navText: {
       fontSize: 18,
     },
     navTextContainer: {
       alignItems: 'center',
       flex: 8,
       justifyContent: 'center',
     },
   });
   
   SideDrawer.propTypes = propTypes;
   const mapStateToProps = (state) => {
     const { url } = state.polls;
     const drawerState = state.drawer.drawerState;
     return { drawerState, url };
   };
   const mapDispatchToProps = dispatch => ({
     closeDrawer: () => dispatch(closeDrawer()),
   });
   
   export default connect(mapStateToProps, mapDispatchToProps)(SideDrawer);
   

2. 连接 tabIcon.js 此外,它将负责在轻触时打开抽屉。

   import React, {
     Component,
     PropTypes,
     StyleSheet
   } from 'react';
   
   import {
     Text,
   } from 'react-native';
   
   import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
   import { Button } from 'native-base';
   import { Actions } from 'react-native-router-flux';
   import { connect } from 'react-redux';
   import { openDrawer } from '../actions';
   
   const propTypes = {
     selected: PropTypes.bool,
     title: PropTypes.string,
   };
   
   class TabIcon extends Component {
     openDrawer = () => {
       this.props.openDrawer();
       // Actions.refresh({ key: 'drawer', open: value => !value });
     };
     render() {
       return (
         <Button
           transparent
           onPress={this.openDrawer.bind(this)} style={styles.navButton}
           style={{ backgroundColor: 'rgba(0,0,0,0)' }}
         >
           <Text>
             <MaterialIcons name="menu" size={30} />
           </Text>
         </Button>
       );
     }
   }
   TabIcon.propTypes = propTypes;
   
   const styles = {
     navButton: {
       alignItems: 'flex-end',
       flex: 1,
     }
   };
   
   export default connect(null, { openDrawer })(TabIcon);