NativeBase：手风琴内的渲染组件

Question

在我的 React Native 应用程序中，我想从 Native Base 实现一个 Accordion。不幸的是，似乎只能在dataArray中添加一个string作为内容。

现在我想在此手风琴中渲染一个具有多选功能的组件，而不仅仅是文本。但是我绝对无法使它正常工作。

这是我的代码。

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;

你知道这是否可能吗？如果没有，我可以做些什么来代替 Accordion 来实现内部带有 Picker 的可折叠组件？

Answer 1

您用 Text 包装了您的自定义组件。尝试将其删除。

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

NativeBase：手风琴内的渲染组件

NativeBase: render component inside accordion

react-native

native-base