2016-09-01 23 views
2

は、ルータがApp.componentDidMountでマウントされているはずなので、すべてのアクションがある反応するネイティブ・ルータ・フラックスはActions.callbackが

import React from 'react'; 
import {Scene, Router} from 'react-native-router-flux'; 

export default App extends React.Component { 
    componentDidMount() { 
     // This fails 
     Actions.login(); 
    } 

    render() { 
    return (
     <Router> 
     <Scene key="root" hideNavBar> 
      <Scene key="login" component={Login} /> 
      <Scene key="main" component={Main} initial /> 
     </Scene> 
     </Router> 
    ); 
    } 
} 

を投げルータで次のスニペットの結果を実行して定義されていないスロー働いているはずです。
タイムアウトを2秒に設定した場合、動作します。 誰かがそれに遭遇しましたか?私はここで何か間違っていますか?

答えて

1

最後に私は問題が何であるか理解しました。
シーンの初期化に時間がかかりません。
Action.loginには、rootのcomponentDidMountの後の最初の実際のレンダリングの後にRouterが注入するActions.callbackが必要です。

はここで何が起こるかです:
ルートがそう何もしないstate.reducerせずに呼び出された関数のレンダリング
ルーターと呼ばれる機能をレンダリングします。
Router componentDidMount called - アクションが初期化され、レデューサーが状態に保存されます(setStateは非同期です)。
ルートコンポーネントDidMount - ここでコールバックはまだ初期化されていません。
ルータのレンダリングが呼び出されました - この呼び出しは前にsetStateによってトリガされます。これでActions.callbackが注入されます。

したがって、2番目のレンダリング後、ルータは初期化されます。

私は、任意のsetTimeoutより優れた解決策を見つけることができました。
ルータはrenderメソッドをオーバーライドし、それがデータでレンダリングだ直後に、あなたは親に通知:

class OverrideRouter extends Router { 
    constructor(props) { 
     super(props); 
     this.render = this.overrideRender; 
    } 
    overrideRender() { 
     const result = super.render(); 
     if (!result) { 
      return result; 
     } 
     // after first initialization use the regular render. 
     this.render = super.render; 
     if (this.props.onRouterInitialize) { 
      // need this setTimeout to allow this method to complete so that the Actions.callback is populated 
      setTimeout(this.props.onRouterInitialize, 10); 
     } 
     return result; 
    } 
} 

編集
私は完全に問題を解決するために管理し、それを解決するために、プルリクエストを送りました。 https://github.com/aksonov/react-native-router-flux/pull/1137

関連する問題