NativeBase: визуализация компонента внутри аккордеона - PullRequest
Новая
       36

NativeBase: визуализация компонента внутри аккордеона

0 голосов
/ 21 марта 2020

В моем приложении React Native я хочу реализовать Accordion от Native Base. К сожалению, кажется, что добавить string в качестве содержимого можно только в dataArray.

Теперь я хотел бы визуализировать компонент с множественным выбором внутри этого аккордеона, а не только текст. Но я абсолютно не в состоянии заставить это работать.

Вот мой код.

Accordion.tsx: 

imports ...

type Props = {};

interface ArrayContent {
  title: string;
  content: any;
}

export default class Accordion extends Component<Props> {

  // PickerInput is the component that should be rendered inside content of dataArray
  renderPickerInput = () => {
    return <PickerInput></PickerInput>;
  };

  dataArray = [
    {
      title: 'GENERAL',
      content: this.renderPickerInput(), // render component here, but it seems that it takes only string
    },
  ];

  renderHeader(item: ArrayContent, expanded: boolean) {
    return (
      <View>
        <Text>{item.title}</Text>
        {expanded ? (
          <Icon name="arrow-dropup" />
        ) : (
          <Icon name="arrow-dropdown" />
        )}
      </View>
    );
  }
  renderContent(item: ArrayContent) {
    return (
      <Text>
        {item.content}
      </Text>
    );
  }
  render() {
    return (
      <Accordion
        dataArray={this.dataArray}
        renderHeader={this.renderHeader}
        renderContent={this.renderContent}
      />
    );
  }
}

... и компонент, PickerInput.tsx: 

imports ...

const choices = [
  {
    id: '1',
    name: 'Eric',
  },
  {
    id: '2',
    name: 'Kyle',
  },
  {
    id: '3',
    name: 'Kenny',
  },
  {
    id: '4',
    name: 'Stan',
  },
];

function PickerInput() {
  const [items, setItems] = useState(choices);

  const toggleSelect = item => {
    setItems(
      items.map(element => {
        if (item === element) {
          element.selected = !element.selected;
        }
        return element;
      }),
    );
  };

  const clearSelection = () => {
    setItems(
      items.map(i => {
        i.selected = false;
        return i;
      }),
    );
  };

  const onPress = item => {
    toggleSelect(item);
  };

  const renderItem = item => {
    return (
      <View>
        <ListItem
          onPress={() => onPress(item)}
          key={item.id}>
          <Body>
            <Text>{item.name}</Text>
          </Body>
        </ListItem>
      </View>
    );
  };

  return (
    <Container>
      <List>
        {items.map(item => {
          return renderItem(item);
        })}
      </List>
    </Container>
  );
}

export default PickerInput;

У вас есть идея, если это вообще возможно? Если нет, что я могу сделать вместо Аккордеона, чтобы получить разборный компонент с Пикером внутри?

1 Ответ

1 голос
/ 21 марта 2020

Вы завернули свой пользовательский компонент с Text. Попробуйте убрать это. 

renderContent(item: ArrayContent) {
   return item.content;
}
...