将图像uri绑定到flatlist react-native

时间:2017-11-13 11:58:14

标签: reactjs react-native ecmascript-6

我正在尝试将图片uri绑定到平面列表。但事实并非如此。渲染..

this.state = {
        data: [

            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'Bank Accounts', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'PrePaid-Cards', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'Other Wallets', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'Help', val: ''
            },
            {
                avatar: 'require(../../resources/icons/MyAccount/rounduser.png)', text: 'About App', val: ''
            }
        ]
    }
}

我正在使用这种方法。渲染RenderItem for flatlist

_renderList = ({ item }) => {
    return (
        <View style={styles.listContainer}  >
            <Image style={styles.listImage}  source={item.avatar}  />
            <Text style={styles.listText} >{item.text}</Text>
            <Text style={styles.listVal} >{item.val}</Text>
            <Image style={styles.listImage} source={require('../../resources/icons/MyAccount/arrowright.png')} />
        </View>
    );

}

它呈现空白空间。有什么我想念的吗?

1 个答案:

答案 0 :(得分:2)

你在字符串里面有require。应该明白要求:

avatar: require('../../resources/icons/MyAccount/rounduser.png')