V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
labikekoko
V2EX  ›  程序员

Warning: React.createElement: type is invalid — expected a string (for built-in components) or a class/function

  •  
  •   labikekoko · 2018-04-14 14:29:05 +08:00 · 1322 次点击
    这是一个创建于 2450 天前的主题,其中的信息可能已经有所发展或是发生改变。
    import React, { Component } from 'react';
    import {
        AppRegistry,
        TabBarIOS,
        FlatList
        TouchableHighlight,
        Image,
        Dimensions,
        StyleSheet,
        Text,
        View
    } from 'react-native';
    import Icon from 'react-native-vector-icons/Ionicons';
    
    const width = Dimensions.get('window').width
    
    class ChatList extends Component{
        constructor(props){
            super(props)
            this.state = {
                data: [
                    {
                        "id":"230000201707307019",
                        "thumb":"http://dummyimage.com/600x300/058a9d)",
                        "video":"http://p.you.video.sina.com.cn/swf/opPlayer20180330_V5_1_1_63.swf?v=1523591005626"
                    },
                    {
                        "id":"150000200110173287",
                        "thumb":"http://dummyimage.com/600x300/3594ad)",
                        "video":"http://p.you.video.sina.com.cn/swf/opPlayer20180330_V5_1_1_63.swf?v=1523591005626"
                    }
                ],
            }
        }
        _renderItem = (item, index) => {
            return(
                <TouchableHighlight>
                    <View style={styles.item}>
                        <Text style={styles.title}>{item.id}</Text>
                        <Image
                            source={{uri: item.thumb}}
                            style={styles.img}
                        >
                            <Icon
                                name='ios-play'
                                size={25}
                                style={styles.play}
                            />
                        </Image>
                        <View style={styles.itemFooter}>
                            <View style={styles.itemFooterBox}>
                                <Icon
                                    name='ios-heart-outline'
                                    size={25}
                                    style={styles.up}
                                />
                                <Text style={styles.handlerText}>点赞</Text>
                            </View>
                            <View style={styles.itemFooterBox}>
                                <Icon
                                    name='ios-chatboxes-outline'
                                    size={25}
                                    style={styles.comment}
                                />
                                <Text style={styles.handlerComment}>评论</Text>
                            </View>
                        </View>
                    </View>
                </TouchableHighlight>
            )
        }
        _keyExtractor = (item, index) => index
        render(){
            return(
                <View style={styles.container}>
                    <View style={styles.header}>
                        <Text style={styles.headerTitle}>Header</Text>
                    </View>
                    <FlatList
                        data={this.state.data}
                        renderItem={this._renderItem}
                        keyExtractor={this._keyExtractor}
                    />
                </View>
            )
        }
    }
    
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#F5FCFF',
        },
        header: {
            paddingTop: 25,
            paddingBottom: 15,
            backgroundColor: '#ee735c'
        },
        headerTitle: {
            color: '#fff',
            fontSize: 15,
            fontWeight: '600',
            textAlign: 'center'
        },
        item: {
            width: width,
            marginBottom: 10,
            backgroundColor: '#fff'
        },
        title: {
            padding: 10,
            fontSize: 18,
            color: '#333'
        },
        img: {
            width: width,
            height: width * 0.5,
            resizeMode: 'cover'
        },
        play: {
            position: 'absolute',
            bottom: 14,
            right: 14,
            width: 46,
            height: 46,
            paddingTop: 9,
            paddingLeft: 18,
            backgroundColor: 'transparent',
            borderColor: '#fff',
            borderWidth: 1,
            borderRadius: 23,
            color: '#ed7b66'
        },
        itemFooter: {
            flexDirection: 'row',
            justifyContent: 'space-between',
            backgroundColor: '#eee'
        },
        itemFooterBox: {
            padding: 10,
            flexDirection: 'row',
            width: width / 2 - 0.5,
            justifyContent: 'center',
            backgroundColor: '#fff'
        },
        handlerText: {
            color: '#333',
            paddingLeft: 12,
            fontSize: 18
        },
        up: {
            color: '#333',
            fontSize: 22
        },
        handlerComment: {
            color: '#333',
            fontSize: 22
        }
    })
    
    
    export default ChatList
    
    

    哪里出错了,说是得到了一个 object, 本应该是 class/function

    2 条回复    2019-04-18 10:53:05 +08:00
    labikekoko
        1
    labikekoko  
    OP
       2018-04-14 14:59:00 +08:00
    已发现问题,根组件里用`const x = require('../xxx')` 引入的第三方包
    toma77
        2
    toma77  
       2019-04-18 10:53:05 +08:00
    @labikekoko 我也是用的 require,以为没有 @types 声明,请问你后来怎么解决的呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2548 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 02:58 · PVG 10:58 · LAX 18:58 · JFK 21:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.