Question

我是React Native的新手，我启动了一个expo项目，并使用Auth flow设置了一个切换导航，一切运行正常

现在在我的抽屉导航器中，我想创建一个自定义菜单，因此我遵循了文档，如下创建了页眉和页脚，

const SideMenu = props => (
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
        <View style={{ flexDirection: 'row', alignSelf: 'center', justifyContent: 'center', alignItems: 'center' }}>
            <Image
                source={require('../../assets/icon.png')}
                style={{ width: 90, height: 90 }}
            />
            <Image
                source={require('../../assets/text.png')}
                style={{ width: 166.95, height: 75 }}
            />
        </View>
        <ScrollView>
         <DrawerItems {...props} />
        </ScrollView>
        <View style={{ flexDirection: 'row', alignSelf: 'center' }}>
            <SocialIcon
                type='facebook'
                style={{ width: 32, height: 32 }}
                iconSize={20}
                onPress={() => { Linking.openURL('https://facebook.com/Ab3ad.eg') }}
            />
            <SocialIcon
                type='twitter'
                style={{ width: 32, height: 32 }}
                iconSize={20}
                onPress={() => { Linking.openURL('https://twitter.com/Ab3ad_eg') }}
            />
            <SocialIcon
                type='instagram'
                style={{ width: 32, height: 32 }}
                iconSize={20}
                onPress={() => { Linking.openURL('https://instagram.com/Ab3ad.eg') }}
            />
        </View>
    </SafeAreaView>
);

我想使用折叠菜单，并使用相同的数据（标签，图标，焦点，样式等）所以我使用了手风琴折叠反应本机组件，它是简单的演示

import {Collapse,CollapseHeader, CollapseBody} from 'accordion-collapse-react-native';

<Collapse>
    <CollapseHeader>
      <View>
        <Text>Click here</Text>
      </View>
    </CollapseHeader>
    <CollapseBody>
      <Text>Ta daa!</Text>
    </CollapseBody>
</Collapse>

现在我只想从其中调用一个屏幕数据，可以将其用作折叠标题和折叠主体等。

import {Collapse,CollapseHeader, CollapseBody} from 'accordion-collapse-react-native';

<Collapse>
    <CollapseHeader>
      <View>
        <DrawerItems.Screen1 {...props} />
      </View>
    </CollapseHeader>
    <CollapseBody>
      <DrawerItems.Screen2 {...props} />
      <DrawerItems.Screen3 {...props} />
    </CollapseBody>
</Collapse>

我该如何实现？

在自定义抽屉中调用指定的抽屉项目

0 个答案: