动态填充嵌套的react-native- collapse

Question

我需要用api请求中的项填充菜单。我做了一些样品;const items。有些菜单项有孩子，孩子也可以有孩子，所以我需要嵌套几个层次的菜单项。

我用react-native-collapsible制作了一个Accordion()和一个AccordionItem()，用于没有孩子的项目。

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

当手动添加每个项目时，它按我想要的方式工作。我需要以编程方式填充菜单，但RootMenuItem()渲染的嵌套手风琴在android和iOS上行为不当。在网上测试零食时。

这是我完整的App.js的小吃:https://snack.expo.dev/@dissar nested-collapsibles

我做错了什么吗?有没有人有更好的方法来做这件事?

PS:当测试零食时，动态渲染的物品有奇怪的宽度。我知道，但不用担心。

Answer 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}/>
)
}

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

Answer 2

我有一个更好的解决方案，不使用任何第三方库。这是完全定制的，易于理解。我用的数据格式和你用的一样。

首先我们有一个组件

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>

);

then用于列表项及其子项

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