动态填充嵌套的 react-native-collapsible答案

【问题标题】：Dynamically populating nested react-native-collapsible动态填充嵌套的 react-native-collapsible
【发布时间】：2021-10-21 09:28:49
【问题描述】：

我需要使用来自 api 请求的项目来填充菜单。我做了一些样品； const items。有些菜单项有子项，子项也可以有子项，所以我需要嵌套几级菜单项。

我用 react-native-collapsible 中的 Collapsible 制作了一个 Accordion()，并为没有子项的项目制作了一个 AccordionItem()。

function App() 呈现菜单项两次。一次通过手动添加Accordions 和AccordionItems，一次通过映射items[]。 RootMenuItem() 为每个顶级项目调用并通过递归呈现该项目及其子项目。

当手动添加每个项目时，它会按照我想要的方式工作。我需要以编程方式填充菜单，但 RootMenuItem() 呈现的嵌套手风琴在 android 和 iOS 上表现不佳。在snack.io 上进行网络测试时，它似乎工作正常。

这是我完整的 App.js 的一个点心： https://snack.expo.dev/@dissar/nested-collapsibles

我做错了吗？有没有人有任何提示可以更好地做到这一点？

PS：在snack.io 上测试时，动态渲染的项目有奇怪的宽度，但不用担心。

【问题讨论】：

标签： react-native expo accordion react-native-collapsible

【解决方案1】：

我似乎已经通过删除第 46 行和第 56 行的视图自己修复了它；

function RootMenuItem({item}){
  if(item.children.length > 0) {
    return(
      <View style={{flex: 1}} key={item.id}>    // <---- I removed this
        <Accordion item={item} style={styles.menuItemView}>
          {
            item.children.map(child => (
              <View style={{paddingLeft: 18}} key={child.id}>
                <RootMenuItem item={child} style={{paddingLeft: 10}}/>
              </View>
            ))
          }
        </Accordion>
      </View> // <---- Also removed this
    )
  }
  else return (
    <AccordionItem item={item}/>
  )
}

不太确定为什么该视图使嵌套手风琴无法正常工作。如果你有答案，请告诉我。

【讨论】：

【解决方案2】：

我有一个更好的解决方案，无需使用任何 3rd 方库。这是完全定制的并且易于理解。我使用的数据格式与您使用的相同。

首先，我们有一个组件

const [active, setActive] = useState(null);
return (
<ScrollView
  style={{ marginTop: 50 }}
  contentContainerStyle={styles.container}>
  {arr.map((x, i) => (
    <Item
      key={x.name}
      active={active}
      i={i}
      setActive={setActive}
      child={x.child}
    />
  ))}
</ScrollView>

);

那么对于列表项及其子项

function Item({ i, active, setActive, child }) {
  const onPress = () => {
    LayoutAnimation.easeInEaseOut();
    setActive(i == active ? null : I);
  };
  const [childActive, setChildActive] = useState(null);
  const open = active == I;
  return (
<TouchableOpacity style={styles.item} onPress={onPress} activeOpacity={1}>
  <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
    <Text>Header - {i + 1}</Text>
    {child.length ? <Text>{open ? 'close' : 'open'}</Text> : null}
  </View>
  {open &&
    child.map((x, i) => {
      if (x.child.length) {
        return (
          <Item
            key={x}
            active={childActive}
            i={i}
            setActive={setChildActive}
            child={x.child}
          />
        );
      }
      return (
        <Text key={x} style={styles.subItem}>
          - SOME DATA
        </Text>
      );
    })}
</TouchableOpacity>
);
}

这是一个完全动态的过程，您可以根据需要延长链条。您还可以查看博览会以了解其作品。 https://snack.expo.dev/@akash0208/forlorn-popsicle

【讨论】：