如何使用自定义视图实现动态列表项

时间:2019-01-05 03:39:15

标签: javascript reactjs listview react-native

我们如何制作使用自定义View实现的list-item,请记住这不是flat-list。数据来自数组,与flat-list相比,我在实现数据时遇到了麻烦。有想法吗?

The ListItem

 <ListItem
     // chevron
     title= {this.name}
     rightTitle="100"
     hideChevron
     rightTitleStyle={{ fontSize: 15 }}
     onPress={() => this.onPressOptions()}
     containerStyle={styles.listItemContainer}
     leftIcon={
         <BaseIcon
             containerStyle={{ backgroundColor: '#FAD291' }}
             icon={{
                 type: 'font-awesome',
                 name: 'money',
             }} />
         }
     rightIcon={<Chevron />} 
/>

这是我使用平面列表的方式,并且可以正常工作

<FlatList
    data={this.state.data}
    renderItem={({ item }) => (
        <ListItem onPress={() => {
            this.props.navigation.navigate('FundsTableComponent', {});
            roundAvatar
            title={`${item.name}`}
            subtitle={item.code}
            data={item.code}
            avatar={{ uri: 'https://facebook.github.io/react/logo-og.png' }}
            />
    )}
    keyExtractor={item => item.name}
    ItemSeparatorComponent={this.renderSeparator}
/>

0 个答案:

没有答案