React-native-router-flux: モーダルの使い方

作成日 2017年08月03日  ·  16コメント  ·  ソース: aksonov/react-native-router-flux

バージョン

  • react-native-router-flux v4b15
  • react-native v46

モーダルに関するドキュメントがなく、例には特定のシーンがモーダルで表示され、他のシーンが表示されない方法についてのコメントや表示がないため、私はモーダルに本当に苦労しています。 これが私のコードです。

<Router>
  <Scene key="root" hideNavBar hideTabBar>
    <Scene key="tabBar" tabs>
      <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
      <Scene key="favorites" component={Favorites} title="Favorites" />
      <Scene key="messages" component={Messages} title="Messages" />
      <Scene key="profile" component={Profile} title="Profile" />
    </Scene>
    <Scene key="modal" modal>
      <Scene key="map" component={Map} title="Map" hideNavBar />
    </Scene>
    <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
  </Scene>
</Router>;

Mapコンポーネントをモーダルに表示しようとしています。

MapButtonは次のとおりです。

const MapButton = () =>
  <TouchableWithoutFeedback onPress={Actions.map}>
    <Text>Map</Text>
  </TouchableWithoutFeedback>;

rightTextは非常にバグが多く、半分の時間レンダリングされないため、これを使用する必要があります。

最も参考になるコメント

おかげで、これは問題を修正します。 それについてのドキュメントの行がないとき、私が何かを理解することをどのように期待しますか? このモーダル機能について多くの人が問題を開いています。おそらくそれはドキュメントの必要性を示しています...

全てのコメント16件

rootシーンをモーダル内に配置してみてください。
このような:

<Router>
    <Scene key="modal" modal>
       <Scene key="root" hideNavBar hideTabBar>
            <Scene key="tabBar" tabs>
              <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
              <Scene key="favorites" component={Favorites} title="Favorites" />
              <Scene key="messages" component={Messages} title="Messages" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />

@lucoが提案したように、ルートシーンをmodalとして作成する必要があります。 サンプルプロジェクトを確認してください。ログインはモーダルとして実装されています

これはまだ機能しません。

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
      </Scene>
    </Scene>
  </Router>

モーダルシーンですべてをラップすると、残りのシーン(ListingDetailなど)をモーダルにしたくないときに、 1つの特定のシーンがモーダルになることは私には意味がありません。 Actions.mapに使用する必要のある特定のパラメーターはありますか?

残念ながら、これはreact-navigationの問題です。スタックの子に対して異なるアニメーションをサポートしていません。 問題を再現できません(コードは問題ないようです)。そのため、問題を解決したい場合は、このリポジトリの例をフォークして変更するようにお願いします。 ご覧のとおり、例からのログインモーダルは正常に機能します

では、モーダルiOS移行をサポートする方法はないと言っているのですか? つまり、下からスライドするものですか?

どう言う意味ですか? 例にはモーダルログイン画面(下からスライドする)があることを2回言いました

わかりましたが、私のコードは問題ないようだともおっしゃいました。

私は例に従うように最善を尽くしましたが、ドキュメントがないため、すべてが存在する理由がわかりません。 明らかに私のルートが異なるので、そのコードをコピーして貼り付けることはできません。

私があなたのコードについてあなたに話すことができたのと同じです-私はプロジェクト全体とすべての詳細を見ていません。 たとえば、 Actions.mapを使用すると、コンパイル中に生成されない(およびnullになる)可能性があります。

必要なものを教えていただければ、さらに多くのコードサンプルを提供できてうれしいです。 Actions.map機能しますが、下から期待するものの内側から移行するだけです。

同じアプリでpushmodalの両方のトランジションを使用することはできないと言っていますか?

ああ、神様。 アプリではなく、1つのコンテナーにあります。 さらに詳しく調べた後、コードにエラーが発生しました-'map 'はまだ' normal 'コンテナ(key = root)の子であり、モーダル(key =' modal ')ではありません。 何をしているのかわからないようです。 多分このコンポーネントはあなたには複雑すぎます...

これを試して:

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
      </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
    </Scene>
  </Router>

おかげで、これは問題を修正します。 それについてのドキュメントの行がないとき、私が何かを理解することをどのように期待しますか? このモーダル機能について多くの人が問題を開いています。おそらくそれはドキュメントの必要性を示しています...

ここでの最近の投稿は、ドキュメントではなく、JSX構文とナビゲーションコンテナの理解に関するものです。
モーダルに関する情報を追加しました。

こんにちは、

私のために働いた

<Router navigationBarStyle={{backgroundColor: '#FF5722'}} titleStyle={{color: '#fff'}}>
        <Modal>
            <Stack key="root">
                <Scene key='login_screen' component={LoginScreen} title='login' hideNavBar={true} />
            </Stack>
            <Scene key='cadastro_screen' component={CadastroScreen} title='Cadastro' hideNavBar={false} />
        </Modal>
</Router>

モーダルラッパーを追加すると、ビューの上部に2つのナビゲーションバーが表示されます。hideNavBarを追加すると、両方が消えます。 この問題を解決するにはどうすればよいですか?明らかに2つではなく1つのタブバーが必要です...?

<Modal>は独自のナビゲーションバーを追加するため、 <Modal hideNavBar>を使用します。これにより、ルートシーンのナビゲーションバーが2つになります。

このページは役に立ちましたか?
0 / 5 - 0 評価