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

我正在开发一个react native/redux应用程序，其底部选项卡导航器类似于上的示例。我的屏幕都连接到Redux存储并显示共享数据，但是我希望这些屏幕中至少有一个忽略存储中的当前数据，而是在每次导航到该数据时重新初始化该数据（而不是继续以上次保留的任何状态显示数据）

screen有一个方法来实现这一点，但我不知道如何在第一次呈现屏幕后调用它（例如，从构造函数或componentDidMount（）方法）。我无法从render（）方法调用它，因为这会导致“无法在现有状态转换期间更新”错误

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

主屏幕.js：

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


const initialValue = ... 

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

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

const initialValue = ... 

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();
}

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

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

因此，现在的问题取决于如何在选项卡按钮上实现一些onPress功能。我相信这个问题的答案是：

---

因此我找到了一个答案，它比预期的要复杂一点：正如Vinicius所指出的，我需要使用tabBarOnPress导航选项，但我还需要使我的调度功能可用于此导航选项

为此，我发现我需要将对分派函数的引用（作为我屏幕的属性提供）传递到导航选项中，因此我使用了导航参数来完成此操作，以下是我的结论：

主屏幕.js：

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


const initialValue = ... 

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

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

const initialValue = ... 

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();
}

AppNavigator.js：

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


const initialValue = ... 

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

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

const initialValue = ... 

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();
}

注:

• 我将道具作为导航参数传递，而不是我的调度功能（它也可以工作），因为它更灵活（例如，它使我的所有调度功能可用）
• initializeData（）在构建主屏幕期间（第一次显示屏幕）和从导航图标（后续显示屏幕）调用
• 有必要检查导航选项中是否定义了参数，因为在第一次显示屏幕时它将未定义（因为屏幕构造尚未发生）。这也使得在构建屏幕时需要调用initializeData（）