React Native Component不工作检查App的渲染方法答案

【问题标题】：React Native Component not working check render method of AppReact Native Component不工作检查App的渲染方法
【发布时间】：2016-12-30 11:47:05
【问题描述】：

我正在使用 React Native 来构建 Android 应用

我正在尝试从位于 app/containers/AppContainer.js 的文件夹中导入 index.android.js 文件中的组件 >.

当我运行代码时，我得到了这个错误：

元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查App的渲染方法

这是我的 index.android.js 文件：

import React, { Component } from 'react';

import {  createStore,Provider, applyMiddleware, combineReduxers, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';


import {  AppRegistry } from 'react-native';
import { expect,assert } from 'chai';

import reducer from './app/reducers';
import AppContainer from './app/containers/AppContainer'

const loggerMiddleware = createLogger({ predicate: (getState,action) => __DEV__ });

function configureStore (initialState) {
 const enhancer = compose(
      applyMiddleware(
         thunkMiddleware,
         loggerMiddleware,
      ),
     );
  return createStore(reducer, initialState, enhancer);
 }

const store = configureStore({});



const App = () => (
  <Provider store={store}>
    <AppContainer />
  </Provider>
)

AppRegistry.registerComponent('Appetizing', () => App);

这是我的 AppContainer.js 文件：

 import React, { Component } from 'react'
 import ReactNative from 'react-native'
 const {
   View,
   Text,
 } = ReactNative

class AppContainer extends Component{

render(){
  return <View>
    <Text style={{marginTop: 20}}>
    I am app container
    </Text>
  </View>
  } 

 } 


export default AppContainer

【问题讨论】：

你试过import {AppContainer} from './app/containers/AppContainer'吗？
@G0dsquad 是的，不起作用。我遇到了同样的错误。
如果我包含组件并在标准视图中呈现它，您的代码实际上对我来说很好。 home.js（而不是index.android.js）。

标签： javascript android react-native redux

【解决方案1】：

你的问题出在这一行：

import { createStore,Provider, applyMiddleware, combineReduxers, compose } from 'redux';

命名导入在 ES6 中的工作方式是，如果名称不存在，则简单地将其初始化为 undefined，因此在尝试渲染 <Provider> 时，react 会报错。

您正在寻找的Provider 位于react-redux 包中，除了redux 之外，您还必须安装它。您的代码应如下所示：

import {  createStore, applyMiddleware, combineReduxers, compose } from 'redux';
import {Provider} from 'react-redux';

【讨论】：

【解决方案2】：

尝试将您的应用更新为此。

const App = React.createClass({
  render: function() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    )
  }
});

【讨论】：

【解决方案3】：

尝试在 AppContainer.js 中关注。

import React, { Component } from 'react'
 import ReactNative from 'react-native'
 const {
   View,
   Text,
 } = ReactNative

export default class AppContainer extends Component{

render(){
  return <View>
    <Text style={{marginTop: 20}}>
    I am app container
    </Text>
  </View>
  } 

 }

【讨论】：

谢谢，但没有解决我的问题，我遇到了同样的错误

【解决方案4】：

问题出在： import ReactNative from 'react-native' const { View, Text, } = ReactNative

为了更好地理解，您可以将模块 from 'react-native' 想象成一个带有一个“魔法”键的对象 - 默认 { default: ReactNative View: ... Text: ... }

es6 导入，在这种情况下 - 反应原生捆绑器，通过访问 default 属性而不是整个模块来解析 import ReactNative from 'react-native'

然后你尝试访问 default.View 这是不可能的，因为 ReactNative 类没有它

如果你想访问模块的导出非默认属性，你应该使用语法import ReactNative, {View, Text} from 'react-native'

【讨论】：