React-native：向所有通过 react-navigation 和 redux 创建的屏幕添加一个组件答案

【问题标题】：React-native: add a component to all the screens created via react-navigation and reduxReact-native：向所有通过 react-navigation 和 redux 创建的屏幕添加一个组件
【发布时间】：2019-07-26 10:18:04
【问题描述】：

我正在创建一个带有 react-navigation 和 redux 的 react-native 应用程序来管理状态。这是我的 app.js 文件：

// all the imports...

const store = createStore(combineReducers({ store: Store}));

const ProfileScreenStore = connect(state => ({ store: state.store}))(ProfileScreen);
const SensingScreenStore = connect(state => ({ store: state.store }))(SensingScreen);

const AppNavigator = createStackNavigator(
  {
    Profile: ProfileScreenStore,
    Sensing: SensingScreenStore,
    SensingTarget: SensingTargetScreen,
    Navigation: NavigationScreen,
  },
  {
    initialRouteName: "Profile"
  }
);

const Navigation = createAppContainer(AppNavigator)

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation />
      </Provider>
    );
  }
}

现在我想添加一个Error 组件，这样我就可以在应用程序的所有屏幕上显示错误消息。我的想法是做这样的事情：

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Error />
        <Navigation />
      </Provider>
    );
  }
}

但是当我这样做时，我会收到错误消息：

>  TypeError: Cannot read property 'error' of undefined
>
>  This error is located at:
>     in Error (at App.js:40)
>     in Provider (at App.js:38)
>     in App (at renderApplication.js:35)
>     in RCTView (at View.js:45)
>     in View (at AppContainer.js:98)
>     in RCTView (at View.js:45)
>     in View (at AppContainer.js:115)
>     in AppContainer (at renderApplication.js:34)

我该如何解决这个错误？

编辑：根据要求，这是Error.js的内容：

import React from "react";
import { View, Text } from "react-native";

export default class Error extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <View>
        <Text style={{ color: 'red' }}>{this.props.store.error.message}</Text>
      </View>
    )
  }
}

编辑 2：修复触发的错误

【问题讨论】：

可以看到Error.js的内容吗？

标签： reactjs react-native redux react-navigation

【解决方案1】：

问题似乎来自Error.js 组件，该组件试图访问this.props.store，而this.props 未定义。

您可能希望将组件连接到 Redux 存储以访问错误消息。比如：

function mapStateToProps(state) {
  return { message: state.error.message };
}

export default connect(mapStateToProps)(Error);

state.error.message 在你的 reducer 中定义。

那么你可以直接使用this.props.message来显示错误信息。

【讨论】：

你说得对，我忘记连接store到error组件了！