Question

我正在开发一个带有底部标签导航器的react-native / redux应用程序，类似于https://reactnavigation.org/docs/en/tab-based-navigation.html#customizing-the-appearance上的示例。我的所有屏幕都连接到Redux存储并显示共享数据，但是我希望这些屏幕中的至少一个可以忽略存储中的当前数据，而是每次导航到该数据时都要重新初始化（而不是继续显示数据处于最后保留的状态）。

屏幕具有执行此操作的方法，但是我无法弄清楚在第一次渲染屏幕后如何调用它（例如，从 constructor 或 componentDidMount（） 方法）。我无法从 render（）方法调用它，因为这会导致“在现有状态转换期间无法更新”错误。

我需要导航器以某种方式导致每次按下Home图标时都会调用我的 HomeScreen.initializeData（）方法，但是我该怎么做？

HomeScreen.js ：

initializeData() {
    this.props.resetData(initialValue);
}


const initialValue = ...

（ resetData（）是一个分派函数，用于重新初始化Redux存储）。

Answer 1

从render（）更新状态将创建一个无限循环。另外，您不希望每次重新渲染组件时都运行状态更新，仅当按下选项卡按钮时。这告诉我，进行状态更新的适当位置是选项卡按钮上的一些onPress函数。

因此，现在的问题取决于如何在选项卡按钮上实现一些onPress函数。我相信这个回答这个问题： Is there an onPress for TabNavigator tab in react-navigation?

Answer 2

所以我找到了一个答案，它比预期的要复杂一些：正如Vinicius指出的那样，我需要使用tabBarOnPress导航选项，但我还需要使该调度选项可以使用我的调度功能。

为此，我发现我需要将对调度函数的引用（可以作为屏幕的属性使用）传递给导航选项，因此我使用了导航参数来做到这一点，这就是我要做的最终以：

HomeScreen.js ：

componentDidMount() {
    initializeData(this.props);
    this.props.navigation.setParams({ homeProps: this.props });
}

export const initializeData = (homeProps) => {
    homeProps.resetData(initialValue);
};

const initialValue = ...

AppNavigator.js ：

tabBarOnPress: ({navigation, defaultHandler}) => {
    const routeName = navigation.state.routeName;

    if (navigation.state.params === undefined) {
        // no params available
    } else if (routeName === 'Home') {
        let homeProps = navigation.getParam('homeProps', null);
        initializeData(homeProps);
    } else if (routeName === ...
        ...
    }

    defaultHandler();
}

注意：

我将 props 作为导航参数传递，而不是我的调度功能（也可以使用），因为它更灵活（例如，它使我的调度功能 all 全部可用））。
在构造HomeScreen（首次显示该屏幕）期间和从导航图标（用于后续显示屏幕）都调用initializeData（）。
有必要检查导航选项中是否定义了 params ，因为在第一次显示屏幕时（由于尚未进行屏幕构造）将不会定义该参数。这也使得在屏幕构建期间必须调用initializeData（）。

React-Native / Redux-如何通过导航重新初始化屏幕？

2 个答案: