如何使用flatList React Native动态创建图标

时间:2018-12-07 13:53:00

标签: reactjs react-native

我想通过在列表组件上使用道具来发送图标名称。因此,我可以通过为prop图标指定图标名称来在列表上设置正确的图标。我的代码如下所示:

import React from 'react';
import { Text, View, FlatList } from 'react-native';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';
import { List, ListItem } from 'react-native-elements';

class ListLi extends React.Component {
constructor(props){
    super(props);
};

renderRow ({ item }) {
    let node;

    React.Children.forEach(item, component => {
        node = component;
    });

  return (
    <ListItem onPressRightIcon title={node} rightIcon={{name:icon}}/>
  )
}

render () {
  const { children, icon } = this.props;

  return (
    <StyledList>
        <List>
          <FlatList
            data={children}
            extraData={icon}
            renderItem={this.renderRow}
            keyExtractor={item => item.name}
          />
        </List>
    </StyledList>
  )
 }
}

export default ListLi;

图标属性包含图标的名称,我想在rightIcon rightIcon={{name:icon}}中呈现它吗?

0 个答案:

没有答案