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

时间:2016-12-30 11:47:05

标签: javascript android react-native redux

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

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

当我运行代码时,我得到了错误:

元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined。检查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

4 个答案:

答案 0 :(得分:3)

你的问题在这一行:

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

在ES6中命名导入工作的方式是,如果名称不存在,它只是初始化为undefined,因此在尝试渲染<Provider>时,反应抱怨。

您要查找的Provider位于react-redux包内,除了redux之外,您还必须安装该包。您的代码应如下所示:

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

答案 1 :(得分:0)

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>
  } 

 } 

答案 2 :(得分:0)

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

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

答案 3 :(得分:0)

问题在这里: import ReactNative from 'react-native' const { View, Text, } = ReactNative

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

es6导入,在这种情况下-反应本机捆绑器,通过访问import ReactNative from 'react-native'属性(而非整个模块)来解析default

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

相反,如果要访问模块的导出的非默认属性,则应使用语法import ReactNative, {View, Text} from 'react-native'