React native 无法访问react navigation v3选项卡导航器中的redux道具（获取此.props时出错。<；function\u name>；不是函数）

我无法将选项卡导航器（从React Navigation v3）连接到redux提供程序。 这就是我的react导航和redux的配置方式：

app/
  /react-redux provider
    /app-container (this is the AppContainer of the main SwitchNavigator)
      /welcome-screen
      /login-screen
      /register-screen
      /home-navigator (this is the TabNavigator that is inside the SwitchNavigator)

Home navigator保留用户登录时指向的屏幕。在前3个屏幕（欢迎、登录和注册）中，我可以通过标准mapDispatchToProps访问从redux“连接”到屏幕的功能

这是应用程序组件：

/**
 * Entry point for the app
 */

import React, { Component } from "react";

// redux
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import main_app_reducer from "./modules/core/reducers/main_app_reducer";

// create redux store
const create_store = composeWithDevTools(applyMiddleware(reduxThunk))(createStore);
export const store = create_store(main_app_reducer);

// navigation
import AppContainer from "./modules/core/components/AppNavigator";

import { configure_axios } from "./helpers/axios_config";
configure_axios();

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }
}

export default App;

import { createBottomTabNavigator } from "react-navigation";
import { HomeScreen } from "../screens/HomeScreen";
import { DashboardScreen } from "../screens/DashboardScreen";

const HomeNavigator = createBottomTabNavigator(
    {
        Home: { screen: HomeScreen },
        Dashboard: { screen: DashboardScreen },
    },
    {
        navigationOptions: ({ navigation }) => {
            const { routeName } = navigation.state.routes[navigation.state.index];
            return {
                headerTitle: routeName,
            };
        },
    },
);

export default HomeNavigator;

上面的所有代码都工作正常，没有错误，问题发生在下面的HomeNavigator组件中。 这是HomeNavigator组件：

/**
 * Entry point for the app
 */

import React, { Component } from "react";

// redux
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
import main_app_reducer from "./modules/core/reducers/main_app_reducer";

// create redux store
const create_store = composeWithDevTools(applyMiddleware(reduxThunk))(createStore);
export const store = create_store(main_app_reducer);

// navigation
import AppContainer from "./modules/core/components/AppNavigator";

import { configure_axios } from "./helpers/axios_config";
configure_axios();

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <AppContainer />
            </Provider>
        );
    }
}

export default App;

import { createBottomTabNavigator } from "react-navigation";
import { HomeScreen } from "../screens/HomeScreen";
import { DashboardScreen } from "../screens/DashboardScreen";

const HomeNavigator = createBottomTabNavigator(
    {
        Home: { screen: HomeScreen },
        Dashboard: { screen: DashboardScreen },
    },
    {
        navigationOptions: ({ navigation }) => {
            const { routeName } = navigation.state.routes[navigation.state.index];
            return {
                headerTitle: routeName,
            };
        },
    },
);

export default HomeNavigator;

HomeNavigator中的所有屏幕均未连接到Redux Alt，尽管它们的定义方式与AppContainer文件中的屏幕相同。要进行比较，请参见AppContainer的登录屏幕和HomeNavigator的主屏幕：

登录筛选：

import React, { Component } from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { get_user_servers } from "../actions/core_actions";

export class LoginScreen extends Component {
    componentDidMount() {
        this.props.get_user_servers(); // this function works absolutely fine
    }

    render() {
        return (
            <View>
                <Text> LoginScreen </Text>
            </View>
        );
    }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = { get_user_servers };

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(LoginScreen);

import React，{Component}来自“React”；
从“react native”导入{View，Text}；
从“react redux”导入{connect}；
从“./actions/core\u actions”导入{get\u user\u servers}；
导出类LoginScreen扩展组件{
componentDidMount（）{
this.props.get_user_servers（）；//这个函数工作得非常好
}
render（）{
返回(
登录屏幕
);
}
}
常量mapStateToProps=（状态）=>（{}）；
const mapDispatchToProps={get_user_servers}；
导出默认连接(
MapStateTops，
mapDispatchToProps，
)（登录屏幕）；

主屏幕：

import React, { Component } from "react";
import { View, Text } from "react-native";
import { connect } from "react-redux";
import { get_user_servers } from "../actions/core_actions";

export class HomeScreen extends Component {
    componentDidMount() {
        this.props.get_user_servers();
// the same function as in LoginScreen but here the function does not work
// I'm getting an error = TypeError: this.props.get_user_servers is not a function (see picture below)
    }

    render() {
        return (
            <View>
                <Text> HomeScreen </Text>
            </View>
        );
    }
}

const mapStateToProps = (state) => ({});

const mapDispatchToProps = { get_user_servers };

export default connect(
    mapStateToProps,
    mapDispatchToProps,
)(HomeScreen);

import React，{Component}来自“React”；
从“react native”导入{View，Text}；
从“react redux”导入{connect}；
从“./actions/core\u actions”导入{get\u user\u servers}；
导出类主屏幕扩展组件{
componentDidMount（）{
this.props.get_user_servers（）；
//与LoginScreen中的函数相同，但此处该函数不起作用
//我得到一个error=TypeError:this.props.get\u user\u服务器不是一个函数（见下图）
}
render（）{
返回(
主屏幕
);
}
}
常量mapStateToProps=（状态）=>（{}）；
const mapDispatchToProps={get_user_servers}；
导出默认连接(
MapStateTops，
mapDispatchToProps，
)（主屏幕）；

---

该功能（get_user_servers）定义正确，在LoginScreen中运行良好。

假设它与您导入的功能相同，请尝试从LoginScreen和HomeScreen两个屏幕检查get_user_servers功能的导入。根据您的代码，它看起来像LoginScreen（../../../auth/screens/LoginScreen”）和HomeScreen（../screens/HomeScreen”）不在同一路径中。

如上文所述，您可以检查文件路径，或发布它，以便我们提供帮助。您还可以打开远程调试器，并在componentWillMount内放置：

console.log(this.props)

---

检查主屏幕是否具有道具内部的功能。

感谢所有花时间帮助我的人，最后我忽略了我的错误。如果您查看此问题中的第三个代码块，您可以看到我像这样导入组件：

import { HomeScreen } from "../screens/HomeScreen";
import { DashboardScreen } from "../screens/DashboardScreen";

这是错误的，我将其更改为：

import HomeScreen from "../screens/HomeScreen";
import DashboardScreen from "../screens/DashboardScreen";

---

现在一切正常，再次感谢：）

忘记添加。。。有人能帮我解决这个错误吗。这是我第一次使用react导航，我真的不明白为什么我有两个相同的组件，但一个工作，另一个不工作。谢谢：）你好，威廉，是的，功能相同，导入路径正确。这个问题中的第一个代码块只是应用程序中所有“容器”的一个示例。我试着让你们更容易理解我的问题。主屏幕位于“modules/core/screens/HomeScreen.js”登录屏幕位于“modules/core/screens/LoginScreen.js”功能位于“modules/core/actions/core_actions.js”我刚刚发现功能get_user_服务器不在组件主屏幕的道具中。见下面我给Jonatas的评论。这是HomeScreen.js中componentWillMount（）中console.log（This.props）的输出：我已经找到了答案，请检查下面的答案。谢谢你的帮助：）你好，Jonatas，路径是正确的。有趣的是，主屏幕没有得到道具的功能。这是componentWillMount（）中console.log（This.props）的输出：好的，您可以尝试像这样执行函数吗。get_user_servers（），没有props，一旦这个函数像一个动作而不是redux的道具一样出现。如果出于好奇，你能展示一下LoginScreen中的console.log（this.props）吗？是的，当我尝试这个.get_user_servers（）时，我得到了相同的错误（TypeError:this.get_user_servers不是一个函数），这是LoginScreen.js中componentWillMount（）中console.log（this.props）的输出，如您所见，get_user_servers函数位于LoginScreen中的道具中，但它不在主屏幕中的道具中。很明显，我的HomeNavigator配置有问题。我已经解决了，请检查下面的答案。谢谢你的帮助：）