Question

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

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

感谢提前!!!

这里是我的代码：

从'react'导入React import { 文本，样式表视图，颜色来自'react-native'

从'react-native-deprecated-custom-components'导入NavigationExperimental 从'react-native-circular-action-menu'导入ActionButton 从'react-native-vector-icons / Ionicons'导入图标从'./components/Home'导入主页

export default class App扩展了React.Component { render（）{ 回来（

df1 = df1.loc[~df1.set_index(list(df1.columns)).index.isin(df2.set_index(list(df2.columns)).index)

}

const styles = StyleSheet.create（{ 容器：{ 软硬度：1， backgroundColor：'＃f3f3f3' }， actionButtonIcon：{ fontSize：20，身高：22，白颜色'， }， mainButton：{

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

}）

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

所以我没有AppRegistry。

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

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

0 个答案: