Native Base Accordion，VirtualizedLists 警告

Question

我正在尝试在 Native Base 中使用 Accordion，它返回了一个奇怪的警告。

我的代码：

const dataMenus = [
  { title: "Credit Card", content: "Lorem ipsum dolor sit amet" },
  { title: "Bank Account (for ACH payments)", content: "Lorem ipsum dolor sit amet" },
  { title: "Recurring Payment", content: "Lorem ipsum dolor sit amet" }
];
class MyAccount extends React.Component {
    render() {
      return (
        <Container>
          <Content padder>
            <ScrollView>
              <Accordion dataArray={dataMenus} expanded={0}/>
            </ScrollView>
          </Content>
        </Container>
      );
    }
}

正在返回： VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

谢谢

Answer 1

您可以尝试像这样添加 renderContent 道具：

  renderSecondaryContent = ( item ) => {
    return (
      <ScrollView
        style={{
          padding: 10,
          // height: 300
        }}
        horizontal={true}
      >
        <Text>{item}</Text>
      </ScrollView>
    );
  }

  render() {
    return (
      <Container style={styles.container}>
        <Content
          // style={{ maxHeight: 200 }}
          padder
        >
          <Accordion
            dataArray={dataMenus}
            expanded={0}
            renderContent={(dataMenus) => this.renderSecondaryContent(dataMenus.content)}
          />
        </Content>
      </Container>
    );
  }

我还添加了一个点心 here，您可以在其中进一步试验。 :)

Native Base Accordion，VirtualizedLists 警告

Native Base Accordion, VirtualizedLists warning

react-native

native-base