Question

我正在使用 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

Answer 1

你的问题在这一行：

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';

Answer 2

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

 }

Answer 3

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

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

Answer 4

问题在这里： 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'

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

4 个答案: