如何将NavigationExperimental.Navigator与react-native-circular-action菜单合并？

我知道我这样做是错的..但我正在尝试构建我的第一个原生iOS应用程序，到目前为止，这个项目的导航部分正在打败我 . :(

有人可以用适当的结构指导我吗？我希望能够单击菜单的按钮(npm menu here)以指向另一个页面组件 . 我的目标是使其尽可能模块化，因此我想将所有页面分成独立的组件

提前致谢！！！

这里我的代码如下：

导入来自'react-native'的'react'导入{Text，StyleSheet，View，Color}的反应

从'react-native-deprecated-custom-components'导入NavigationExperimental从'react-native-circular-action-menu'导入ActionButton导入来自'react-native-vector-icons / Ionicons'import Home的图标来自'./components/家'

export default class App扩展React.Component {render（）{return（

<View style ={styles.container}>
            <NavigationExperimental.Navigator
                // style={{ flex:1 }}
                initialRoute={{ name: 'Home' }}
                renderScene={ (route, navigator) => {
                    switch(route.name){
                        case(route.name == 'FAQ'):
                            return <FAQ navigator = {navigator}/>
                        case(route.name == 'Events'):
                            return <Events navigator = {navigator}/>
                        default:
                            return <Home navigator = {navigator}/>
                    }
                }}/>
             <Home/>
            {/*Rest of App come ABOVE the action button component!*/}
                <ActionButton buttonColor = "rgba(231,76,60,1)" style={styles.mainButton}>
                    <ActionButton.Item buttonColor='#84ccc9' title="faq" onPress={() => {}}>
                        <Icon name="ios-help-circle" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#5b4d90' title="aboutUs" onPress={() => {}}>
                        <Icon name="ios-people" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#37a3da' title="events" onPress={() => {}}>
                        <Icon name="ios-calendar" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#91a1c9' title="homePage" onPress={() => {}}>
                        <Icon name="ios-home" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#e84d3d' title="cinthy" onPress={() => {}}>
                        <Icon name="ios-chatboxes" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#f6ba61' title="careerStats" onPress={() => {}}>
                        <Icon name="ios-pie" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#1abc9c' title="jobSearch" onPress={() => {}}>
                        <Icon name="ios-search" style={styles.actionButtonIcon} />
                    </ActionButton.Item>
                </ActionButton>
        </View>
    )
}

}

const styles = StyleSheet.create（{container：{flex：1，backgroundColor：'＃f3f3f3'}，actionButtonIcon：{fontSize：20，height：22，color：'white'，}，mainButton：{

}

}）

更新**：顺便说一句，我使用的是create-react-native-app而不是react-native init

所以我没有AppRegistry .

我知道这个导航方法将被弃用 . 如果您有另一个导航偏好，我愿意查看您的首选导航以及结构如何 .