2016-08-13 18 views
5

tepki yerli-çekmece:birleştirmek nasıl tepki yerli-yönlendirici-akı ben bir şekilde örneklerle bu bağlanmaya çalıştı

tepki yerli-çekmeceyi ile reaksiyona-yerli-yönlendirici-akı: Bu belgeler aşağıdaki : https://github.com/aksonov/react-native-router-flux/blob/master/docs/OTHER_INFO.md

Özel Çekmeceyi bir dosyaya nasıl yerleştirmeliyim?

Hep almak hataları, böyle olmasını çalışırken:

Dosya: bileşenleri/Drawer.js

import Drawer from 'react-native-drawer'; 
import ControlPanel from './ControlPanel'; 
import {Actions, DefaultRenderer} from 'react-native-router-flux'; 

export default class extends Component { 
    render(){ 
     const state = this.props.navigationState; 
     const children = state.children; 
     return (
      <Drawer 
       ref="navigation" 
       open={state.open} 
       onOpen={()=>Actions.refresh({key:state.key, open: true})} 
       onClose={()=>Actions.refresh({key:state.key, open: false})} 
       type="displace" 
       content={<SideMenu />} 
       tapToClose={true} 
       openDrawerOffset={0.2} 
       panCloseMask={0.2} 
       negotiatePan={true} 
       tweenHandler={(ratio) => ({ 
       main: { opacity:Math.max(0.54,1-ratio) } 
       })}> 
       <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} /> 
      </Drawer> 
     ); 
    } 
} 

Dosya: App.js

alıyorum
import Drawer from './components/Drawer' 

bu hata. enter image description here

cevap

7

açıkça tanımlayan ve sınıf adı MyDrawer ihraç ederek bu yaklaşımı deneyin: MyDrawer.js için

import React, { Component } from 'react'; 
import Drawer from 'react-native-drawer'; 
import ControlPanel from './ControlPanel'; 
import {Actions, DefaultRenderer} from 'react-native-router-flux'; 

class MyDrawer extends Component { 
    render(){ 
     const state = this.props.navigationState; 
     const children = state.children; 
     return (
      <Drawer 
       ref="navigation" 
       open={state.open} 
       onOpen={()=>Actions.refresh({key:state.key, open: true})} 
       onClose={()=>Actions.refresh({key:state.key, open: false})} 
       type="displace" 
       content={<SideMenu />} 
       tapToClose={true} 
       openDrawerOffset={0.2} 
       panCloseMask={0.2} 
       negotiatePan={true} 
       tweenHandler={(ratio) => ({ 
       main: { opacity:Math.max(0.54,1-ratio) } 
       })}> 
       <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} /> 
      </Drawer> 
     ); 
    } 
} 


export default MyDrawer; 

Değişim dosya adını ve sonra yolları aşağıda kullanarak içe: Ben denemedim

import MyDrawer from './components/MyDrawer' 
import TestView from './components/TestView' 



    render() { 
     return (
     <Router> 
      <Scene key="drawer" component={MyDrawer}> 
        <Scene key="main" tabs={false} > 
        <Scene key="fireBaseTest" component={TestView} drawerImage={navToggle} /> 
        //add more scenes here 
        </Scene> 
      </Scene> 
     </Router>); 

    } 
} 
+0

Bunu yaptıktan sonra rotaları nereye koymalıyım? – berkayk

+0

, çalıştığı –

+0

yollarına bir örnek ekledi, ancak herhangi bir menü tıklandığında çekmeceyi nasıl kapatacağınız. '() => Actions.refresh ({key: state.key, open: false})' i '' 'adresine aktarmayı denedim ve onu çağırdım, sayfa geziniyor ancak çekmeceyi kapatmıyor. –

9

çekmeceyi ayrı bir dosyaya koyma ama bu benim yaptığım buydu

<Drawer 
    type="static" 
    content={<Menu closeDrawer={() => this.drawer.close() }/>} 
    openDrawerOffset={100} 
    tweenHandler={Drawer.tweenPresets.parallax} 
    tapToClose={true} 
    ref={ (ref) => this.drawer = ref} 
> 
    <Router> 
      <Scene key="root"> 
       <Scene key="home" initial={true}/> 
      </Scene> 
    </Router> 
</Drawer> 

Çok fazla yapılandırma kullanmıyordum, bu yüzden beni Router numaralı yere yerleştirmeme neden olmadı.

+0

Yaklaşımınız iyi ama çekmeceyi evden nasıl açabilirsiniz? – Arif

İlgili konular