Android 使用“后退”按钮重新渲染视图

我正在使用react导航模块在react原生项目中进行导航。按下“后退”按钮时，我想再次调用

componentWillMount（）

。 My 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'
  });
};

我填写一张表格并提交，然后导航到另一个屏幕，现在如果我按下android设备的后退按钮，它将进入旧屏幕，显示已填写的数据。 我需要一个API调用，然后在按下后退按钮时重置状态数据。

---

提前感谢。

您可以在React Navigation中使用

reset

操作，而不是使用

goBack

操作。它允许您重置导航堆栈，重新呈现最顶端的组件，这将解决您的状态未重置问题

要使用

reset

操作，您需要重新定义导航堆栈中需要的所有屏幕以及活动屏幕的索引。 以下是一个例子：

import { NavigationActions } from 'react-navigation'

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

其中，

index

是要激活的屏幕位置，而所有其他屏幕都是

操作

数组将被推入堆栈中

以下是参考资料：

另一种选择是使用回调，我不太了解它，因为我还没有实现它，但为了参考，您可以访问以下链接