关于 image 的 source 的疑问



  • 1、我直接使用

    <Image source={require('../images/4a.jpg')}
                                resizeMode="contain"
                                onPress={() => this.context.router.push('/') }
                                style={[styles.image, { marginLeft: 5 }]}/>
    

    这样可以使用
    2、如果是这样

    const images = [
        {
            key: '../images/banner1.jpg',
            name: 'one',
            link: 'detail'
        },
        {
            key: '../images/banner2.jpg',
            name: 'two',
            link: 'about'
        },
        {
            key: '../images/banner3.jpg',
            name: 'three'
        }
    ];
    {images.map((banner) => {
                            return (
                                <TouchableOpacity key={banner.name}
                                    onPress={banner.link && (() => this.context.router.push('/' + banner.link)) }
                                    activeOpacity={0.75}>
                                    <Image
                                        style={styles.bannerImage}
                                        resizeMode="contain"
                                        source={require(banner.key)}
                                        />
                                </TouchableOpacity>
                            );
                        }) }
    

    这样却报错。有点摸不着头脑啊 对当前的 banner 来说 source 是固定的啊。

    0_1471060236785_9.pic.jpg
    错误提示



  • @hainuo

    文档中已经很明确的说了,你不能require一个表达式,require里面的必须是一个常量。

    所以你应该写

    const images = [
        {
            image: require('../images/banner1.jpg'),
            name: 'one',
            link: 'detail'
        },
        {
            image: require('../images/banner2.jpg'),
            name: 'two',
            link: 'about'
        },
        {
            image: require('../images/banner3.jpg'),
            name: 'three'
        }
    ];
    {images.map((banner) => {
                            return (
                                <TouchableOpacity key={banner.name}
                                    onPress={banner.link && (() => this.context.router.push('/' + banner.link)) }
                                    activeOpacity={0.75}>
                                    <Image
                                        style={styles.bannerImage}
                                        resizeMode="contain"
                                        source={banner.image}
                                        />
                                </TouchableOpacity>
                            );
                        }) }
    

    为了帮助你理解,请记住以下这段代码同样是不行

    const foo = './image.png';
    <Image source={require(foo);} />  // 即使是常量也不行。
    


  • 恩明白了 多谢


登录后回复