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 }} 
    />

所以我点击右上方＆＃39; new＆＃39;按钮，我看到了我的表格。

用户然后保存新的组名

这是我保存到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之后 - ＆gt; groupList我的列表不再刷新。

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

为什么呢？

返回Scene＆＃39; groupList＆＃39;的正确方法是什么？，不惜任何代价强制刷新？

Answer 1

我通过以下方式解决了这个问题

 Actions.replace(sceneKey, props  );

代码

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

希望这有帮助！

Answer 2

这对我有用。尝试一下。要点是定义场景时，可以覆盖其“ onBack”功能。为了强制刷新上一页，您必须每次为其提供一个具有不同值的prop，即Math.random（）。

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

Answer 3

我还没有使用react-native-router-flux，但我遇到了同样的问题，希望能够给你足够的信息来弄清楚如何使用该库。

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

Answer 4

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

这个想法是，如果您想在从子页面路由回去时刷新父页面，我的方法是将destroy和update回调函数传递给子页面。销毁功能可确保页面退回到其初始状态，而更新功能将获取最新数据。

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

这样子页面就可以在路由返回之前调用这些函数。

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

react-native-router-flux：如何返回上一个场景强制重载数据？

4 个答案: