2017-09-29 22 views
0

反応ネイティブプロジェクトでのナビゲーションに反応ナビゲーションモジュールを使用しています。誰かがデバイスの戻るボタンを押したときに、再度componentWillMount()を呼び出す必要があります。 マイrouter.jsが反応ナビゲーション戻る戻るボタンを押すと、ビューがどのように表示されますか?

import React, { Component } from 'react'; 
import { TabNavigator ,StackNavigator ,NavigationActions} from 'react-navigation'; 


import Login from '../Login/Login'; 
import SignUp from '../Registration/SignUp'; 
import Charity from '../Registration/Charity'; 
import FetchFriend from '../Registration/FetchFriend'; 
import Dashboard from '../Dashboard/Dashboard'; 
import Paypal from '../Registration/Paypal'; 
import ForgetPassword from '../Registration/ForgetPassword'; 
import AddFriend from '../AddFriend/AddFriend'; 
import Upcomings from '../Upcomings/Upcomings'; 
const Routes = { 
    RECECNT: { screen : Upcomings,navigationOptions: { 
     tabBarLabel: 'Recent Birthdays' 
    }}, 
    UPNEXT : { screen : Upcomings,navigationOptions: { 
     tabBarLabel: "Up Next" 
    }}, 
    UPCOMING :{ screen : Upcomings,navigationOptions: { 
     tabBarLabel: "Upcoming Birthays" 
    }}, 
}; 

const TabConfig = { 
    stateName: 'MainNavigation', 
    tabBarPosition: 'bottom', 
    animationEnabled: true, 
    tabBarOptions: { 
    activeTintColor: '#DC6361', 
    inactiveTintColor: 'black', 
    labelStyle: { 
     fontSize: 10, 
     width: '100%', 
    },style: { 
    backgroundColor: '#ffffff', 
    borderTopWidth: 1, 
    borderTopColor: 'gray', 
    } 
    }, 
}; 
// register all screens of the app (including internal ones) 
export const screenRoute = (SignIn) => { 
    return StackNavigator({ 
    LOG_IN:{screen:Login}, 
    SIGN_UP:{screen:SignUp}, 
    CHARITY:{screen:Charity}, 
    FETCH_FRIEND:{screen:FetchFriend}, 
    DASHBOARD:{screen: Dashboard}, 
    PAYPAL:{screen: Paypal}, 
    FPASSWORD:{screen: ForgetPassword}, 
    ADDFRIEND:{screen: AddFriend}, 
    UPCOMINGS : {screen :TabNavigator(Routes, TabConfig)}, 
    },{ 
    headerMode: 'none', 
    mode:'modal', 
    initialRouteName: SignIn ? 'DASHBOARD':'LOG_IN' 
    }); 
}; 

である私は、フォームを記入し、充填data.IとAndroidデバイスの[戻る]ボタンを押すと、今すぐ別の画面に移動し、それは昔の画面になり、それを提出するには、API呼び出しをしたいと戻るボタンを押すと状態のデータがリセットされます。前もって感謝します。

答えて

0

goBackアクションを使用する代わりに、リアナビゲーションでresetアクションを使用すると、一番上のコンポーネントを再度レンダリングするナビゲーションスタックをリセットすることができます。これにより、リセットされない状態の問題が解決されます。

resetアクションを使用するには、ナビゲーションスタック内のすべての画面とアクティブな画面のインデックスを再定義する必要があります。ここで は一例です:indexはあなたがアクティブになりたいし、他のすべての画面がactions配列がスタックにプッシュされますであることを、画面の位置である

import { NavigationActions } from 'react-navigation' 

const resetAction = NavigationActions.reset({ 
    index: 0, 
    actions: [ 
    NavigationActions.navigate({ routeName: 'Profile'}) 
    ] 
}) 
this.props.navigation.dispatch(resetAction) 

。ここで

は参照です:https://reactnavigation.org/docs/navigators/navigation-actions#Reset

他の代替は、コールバックを使用することで、私はそれを実装していないように私はそれの多くを知らないが、参考のために、あなたは以下のリンク

に行くことができますhttps://github.com/react-community/react-navigation/issues/733

https://github.com/react-community/react-navigation/issues/845

関連する問題