首页 文章

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

提问于
浏览 次
2

我正在使用 React Native 构建 Android App

我正在尝试从位于 app/containers/AppContainer.js 的文件夹中导入_286990_文件中的 component .

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

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 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
javascript android react-native redux

4 回答

  • 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';
    回复于
  • 0

    尝试将您的应用更新到此 .

    const App = React.createClass({
  render: function() {
    return (
      <Provider store={store}>
        <AppContainer />
      </Provider>
    )
  }
});
    回复于
  • 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>
  } 

 }
    回复于
  • 0

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

    为了更好的不确定，你可以想象模块 from 'react-native' 就像一个带有一个'magic'键的对象 - default { default: ReactNative View: ... Text: ... }

    es6导入，在这种情况下 - 反应本机捆绑包，解析 import ReactNative from 'react-native' 访问 default 属性，而不是整个模块

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

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

    回复于

相关问题