反応ネイティブの引き出しを使用したサイドバー/ハンバーガーメニューの実装

Question

私はリアクションネイティブにはかなり新しいです。 私はアプリケーションにsideBar/hamburgerメニューを追加しようとしていますが、 '反応ネイティブの引き出し'コンポーネントを実装しています。まず、GitHubのサンプルコードを新しいテストプロジェクトに追加して、それがどのように動作するかを理解しようとしています。私は画面のエラーに直面しています。

私は本当に幸せになります。または私のプロジェクトにサイドバー/ハンバーガーメニューを実装するための簡単なアドバイスを教えてください。

import Drawer from 'react-native-drawer'; 
import React, {Component} from 'react'; 
import SideBarContent from '../common/SideBarContent'; 
import {Text,View} from 'react-native'; 

class SideBar extends Component{ 

    closeControlPanel =() => { 
     this._drawer.close() 
    }; 
    openControlPanel =() => { 
     this._drawer.open() 
    }; 

    render() 
    { 
     const drawerStyles = { 
      drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3}, 
      main: {paddingLeft: 3}, 
     } 


     return (
      <Drawer 
       type="static" 
       content={<SideBarContent/>} 
       openDrawerOffset={100} 
       styles={drawerStyles} 
       tweenHandler={Drawer.tweenPresets.parallax} 
      > 
       <View><Text>Drawer</Text></View> 
      </Drawer> 
     ); 
    } 
} 

ここは私のSideBarContentコンポーネントです。

import React, {Component} from 'react'; 
import {Text,View} from 'react-native'; 


class SideBarContent extends Component{ 
    render() 
    { 
     return(
      <View> 
       <Text>Order History</Text> 
       <Text>Account</Text> 
       <Text>Basket</Text> 
       <Text>About us</Text> 
      </View> 
     ); 
    } 
} 

Answer 1

<MainView />基本的にあなたがハンバーガーメニューの前に表示されます画面です。

<ControlPanel />は、ユーザーがハンバーガーメニューをクリックした後に表示される側面図です。つまり、実際のサイドメニューです。

<Drawer />は、これらのビュー、アニメーション、その他の機能のドロワ/サイドビュー/サイドメニューの開閉を制御します。

これらのビューを作成する必要があります。私は私のアプリの例を示すことであなたを手伝ってくれるでしょう。

マイ<ControlPanel />はこの1つである：

は、私はまた、あなたが使用しようとしている同じライブラリを使用してマイ<MainView/>

は、以下、この画面です。

これが役に立ちます。

Answer 2

私はシステム上ではないので、コードの作業をチェックしていませんが、これはうまくいくはずです。

import Drawer from 'react-native-drawer'; 
import React, {Component} from 'react'; 
import SideBarContent from '../common/SideBarContent'; 
import {Text,View} from 'react-native'; 

export default class SideBar extends Component{ 

    constructor(){ 
     super(); 
     this.closeControlPanel = this.closeControlPanel.bind(this); 
     this.openControlPanel = this.openControlPanel.bind(this); 
    } 

    closeControlPanel =() => { 
     this._drawer.close() 
    }; 
    openControlPanel =() => { 
     this._drawer.open() 
    }; 

    render() 
    { 
     const drawerStyles = { 
      drawer: { shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3}, 
      main: {paddingLeft: 3}, 
     } 

     return (
      <Drawer 
       type="static" 
       content={<SideBarContent />} 
       ref = {(ref) => this._drawer = ref} 
       openDrawerOffset={100} 
       styles={drawerStyles} 
       tweenHandler={Drawer.tweenPresets.parallax} 
      > 
       <View> 
       <Text onPress={this.openControlPanel}> 
        Drawer 
       </Text> 
       </View> 
      </Drawer> 
     ); 
    } 
} 

別のファイルSideBarContent

import React, {Component} from 'react'; 
    import {Text,View} from 'react-native'; 


    export default class SideBarContent extends Component{ 
     constructor() { 
      super(); 
     } 
     render() 
     { 
      return(
       <View> 
        <Text>Order History</Text> 
        <Text>Account</Text> 
        <Text>Basket</Text> 
        <Text>About us</Text> 
       </View> 
      ); 
     } 
    } 

は私に知らせてくださいすべての問題であれば...