react-native-router-flux：如何return到上一个场景强制重新加载数据？

Question

我正在使用列表视图

class GroupList extends Component {
  componentWillMount() {
    this.props.fetchGroups();

我从 firebase 获取了一个非常短的元素列表。

export const fetchGroups = () => {
  const { currentUser } = firebase.auth();

  return (dispatch) => {
    dispatch({ 
      type: FETCHING_GROUPS 
    });

    firebase.database().ref(`/users/${currentUser.uid}/groups`)
      .on('value', snapshot => {
        dispatch({ 
          type: GROUPS_FETCHED, 
          payload: snapshot.val() 
        });
      });
  };
};

要创建新项目，我使用 react-native-router-flux 提供的右上角按钮

    <Scene 
      key="groupList" 
      component={GroupList} 
      title="Gruppi di servizio" 
      hideNavBar={false} 
      rightTitle="Nuovo"
      onRight={() => Actions.groupForm({ formType: NEW_GROUP_FORM_TYPE })}
      sceneStyle={{ paddingTop: 65 }} 
    />

所以我点击右上角的 'new' 按钮，我看到了我的表格。

用户再保存新组名

这是我保存到 firebase 的操作：

return (dispatch) => {
  dispatch({
    type: TRYING_TO_CREATE_GROUP,
  });

  firebase.database().ref(`/users/${currentUser.uid}/groups`)
    .push({ groupName })
    .then(() => {
      dispatch({ type: CREATE_GROUP_SUCCESS });
      Actions.groupList({ type: 'reset' });
    })
    .catch((errorText) => { 
      dispatch({ 
        type: CREATE_GROUP_FAILED, 
        payload: errorText
      });
    });
};

有什么问题吗？

第一轮过后

Actions.groupForm({ formType: NEW_GROUP_FORM_TYPE })}

和

Actions.groupList({ type: 'reset' })

我的GroupList刷新成功，因为componentWillMount又被调用了

问题是在第二轮 groupForm -> groupList 之后，我的列表不再刷新。

将控制台日志添加到 componentWillMount 我注意到它不再执行了。

为什么？

return 到场景 'groupList' 的正确方法是什么，不惜一切代价强制刷新？

Answer 1

我没有使用过 react-native-router-flux，但我运行遇到了同样的问题，希望能给你足够的信息来弄清楚如何使用那个库来解决这个问题。

基本上它不会被再次调用 (componentWillMount) 因为组件已经安装并且它只是将焦点返回到该组件。您需要做的是将 fetchGroups() 传递到下一个场景所在的位置，并在您返回 GroupList 场景后再次调用它，这将导致使用最新信息重新渲染。让我知道我是否应该进一步澄清。

Answer 2

我通过执行以下操作解决了这个问题

 Actions.replace(sceneKey, props  );

为了你的代码

 Actions.replace('groupForm', { formType: NEW_GROUP_FORM_TYPE }  );

希望对您有所帮助！

Answer 3

这对我有用。尝试一下。它的要点是当你定义一个场景时，你可以覆盖它的 "onBack" 功能。为了强制刷新上一页，您必须每次都为其提供一个具有不同值的属性，因此 Math.random()。

<Scene
   key='title'
   component={YourComponent}
   title='Title'
   onBack={() => Actions.pop({ refresh: Math.random() })}
/>

Answer 4

在@Matt 的解决方案的启发下，我解决了我的问题。我要 post 我的示例代码。

我的想法是，如果您想在从子页面返回时刷新父页面，我的做法是将销毁和更新回调函数传递给子页面。 destroy 函数确保页面回退到初始状态，而 update 函数将获取最新数据。

// parent scene
Actions.childSceneName({
    onBack: () => this.props.fetchData(),
    destroyParent: () => this.props.destroyPage(),
})

以便子页面可以在路由返回之前调用函数。

// child scene
componentWillUnmount() {
    this.props.destroyParent()
    this.props.onBack()
}

Answer 5

最好的方法是使用状态管理器或 React 的新上下文 API。

这是流程：

进入ScreenOne
从ScreenOne打开ScreenTwo（均使用状态管理）
完成 ScreenTwo 中的所有操作后，调用重新加载 ScreenOne 的函数，同时使用 Actions.pop() 离开当前屏幕（离开 ScreenTwo，然后返回 ScreenOne）。
完成！您的 ScreenOne 已重新加载新数据。

Summary: The key of this is calling your function that reloads Previous Screen.

react-native-router-flux：如何return到上一个场景强制重新加载数据？

react-native-router-flux: How to return to previous Scene forcing reload of data?

react-native

react-native-router-flux