1

と統合しようとしreact-native-router-fluxています。react-native-drawer

私の主なコンポーネントは実際にはApp.jsです。関連する部分のみをコピーして貼り付けます。

import AppRoutes from './Router';
...
constructor(props) {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        Actions.mainBucket({ type: 'reset' });
      } else {
        Actions.authBucket({ type: 'reset' });
      }
    });
    super(props);
  }
}
...
  render() {
    const store = createStore(
      reducers, 
      {}, 
      applyMiddleware(ReduxThunk)
    );

    return (
      <Provider store={store}>
        <AppRoutes />
      </Provider>
    );
  }

これはRouter.js です

const scenes = Actions.create(
  <Scene key="root" hideNavBar open={false} >
    <Scene key="splashBucket">
      <Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
    </Scene>
    <Scene key="authBucket">
      <Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
    </Scene>
    <Scene key="mainBucket" hideNavBar={false}>
      <Scene key="schedule" component={Schedule} title="Impegni"  />
      <Scene key="peopleList" component={PeopleList} title="Lista pesone"/>
    </Scene>
  </Scene>
);

const AppRoutes = () => (
  <Router 
    sceneStyle={{ paddingTop: 65 }} 
    scenes={scenes}
  />
);

export default AppRoutes;

私の目標は、キー「mainBucket」を使用して SideDrawer を Scene バケットに追加することです。、ご覧のとおり、これは私のアプリの主要部分であり、ユーザーは自動的にこのバケットにリダイレクトされ、firebase を使用して自動ログインを実装するためです。

自動ログインと mainBucket の開始は機能します。

sidedrawerの追加作業を開始するには、sidedrawer コンテンツ コンポーネントは最初は<Text>usingnSideMenuコンポーネントだけをレンダリングすると思います。

どのように手続きすればよいですか？

以下の2つのファイルを作成しました。

最初は NavigationDrawer.js です

export default class NavigationDrawer 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
        openDrawerOffset={0.2}
        panCloseMask={0.2}
        negotiatePan
        tweenHandler={(ratio) => ({
          main: { opacity: Math.max(0.54, 1 - ratio) }
        })}
      >
        <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
      </Drawer>
    );
  }
}

2 つ目はほぼ空の SideMenu.js です。

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

const SideMenu = () => (
  <View>
    <Text> 
      SideMenu
    </Text>
  </View>
);

export default SideMenu;

次に、シーン定義を変更して、mainBucket 定義に NavigationDrawer コンポーネントを追加しようとしました

<Scene key="mainBucket" component={NavigationDrawer}>
  <Scene key="schedule" initital component={Schedule} title="Impegni" hideNavBar={false} />
  <Scene key="peopleList" component={PeopleList} title="Lista persone" hideNavBar={false} />
</Scene>

問題は、タイトル付きの react-native-router-flux ヘッダーが表示されなくなったことです。そのため、上部のアクション バーが表示されなくなりました。

私は何を間違っていますか？

4

1 に答える 1

1

これは機能します。mainBucket 全体を別のシーンでラップし、このシーンではドロワーをコンポーネントとして使用しました。

また、スタイルを単一のシーンに移動したことにも注意してください

const scenes = Actions.create(
  <Scene key="root">

    <Scene key="splashBucket">
      <Scene key="splashScene" component={SplashScreen} title="Splash Screen Title" hideNavBar />
    </Scene>

    <Scene key="authBucket" sceneStyle={{ paddingTop: 65 }}>
      <Scene key="authScene" component={AuthForm} title="Accesso" hideNavBar={false} />
    </Scene>

    <Scene key="mainBucket" component={NavigationDrawer}>
      <Scene key="mainBucketInternal">
        <Scene 
          initital
          key="schedule" 
          component={Schedule} 
          title="Impegni" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
        <Scene 
          key="peopleList" 
          component={PeopleList} 
          title="Lista persone" 
          hideNavBar={false} 
          sceneStyle={{ paddingTop: 65 }} 
        />
      </Scene>
    </Scene>

  </Scene>
);

const AppRoutes = () => (
  <Router 
    scenes={scenes}
  />
);

export default AppRoutes;
于 2017-03-13T13:10:26.417 に答える