Question

我正在使用react-navigation模块在react-native项目中导航。我想在按下后退按钮时再次调用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'
  });
};

我填写表格并提交，然后导航到另一个屏幕，现在，如果我按下Android设备的后退按钮，它将进入带有填充数据的旧屏幕。我想要一个API调用然后状态数据在按下后退按钮时重置。提前谢谢。

Answer 1

您可以在React-Navigation中使用goBack操作，而不是使用reset操作，它允许您重置导航堆栈，再次重新渲染最重要的组件，这将解决您的状态问题没有重置。

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

import { NavigationActions } from 'react-navigation'

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

其中index是您想要处于活动状态的屏幕的位置，而所有其他屏幕都是actions数组将被推入堆栈中。

以下是参考：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

react-navigation使用后退按钮重新渲染视图

1 个答案: