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