Question

我正在尝试开发我的第一个react-native应用程序并成功将堆栈导航实现到我的circle-action-menu中。我唯一的问题是菜单只显示在我的主屏幕上。我希望能够为菜单本身创建一个单独的组件，这样我就可以简单地将该组件添加到所有页面中，但我意识到页面正在重新渲染所有相同的元素，这些元素在某种意义上变成了一团糟＆＃34;标题＆＃34;

示例：https://www.dropbox.com/s/vk80ikdn466clg3/Screen%20Shot%202017-08-14%20at%203.13.16%20PM.png?dl=0）

如何重复使用我所有页面的菜单？有任何想法吗？ App.js：

import React from 'react'
    import {
        View,
        StyleSheet
    } from 'react-native'

import HomeScreen from './components/HomeScreen'

class App extends React.Component{
    render(){
        return(
            <View style={styles.container}>
                <HomeScreen/>
            </View>

        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex: 1
    }
})
export default App

HomeScreen.js：

import React from 'react'
import {
    Text,
    StyleSheet,
    View,
    Color
} from 'react-native'

import {StackNavigator} from 'react-navigation'
import ActionButton from 'react-native-circular-action-menu'
import Icon from 'react-native-vector-icons/Ionicons'

class FAQScreen extends React.Component {
    static navigationOptions = {
        title: 'FAQ',

    };
    render() {
        return (
            <View style={styles.Main}>
                <Text>Yo</Text>
            </View>
        );
    }
}
class AboutScreen extends React.Component {
    static navigationOptions = {
        title: 'About Us',

    };
    render() {
        return (
            <View style={styles.Main}>
                <Text></Text>
            </View>);
        }
    }

[与其他页面标题相同]

        class HomeScreen extends React.Component {
            render() {
                 const { navigate } = this.props.navigation;
                return (
                 <View style={styles.Main}>
                    <ActionButton buttonColor = "skyblue">
                         <ActionButton.Item buttonColor='#84ccc9' title = 'FAQ' onPress={() => navigate('FAQ')}>
                        <Icon name="ios-help-circle" style=
                        {styles.actionButtonIcon} />
                    </ActionButton.Item>
                    <ActionButton.Item buttonColor='#5b4d90' title="aboutUs" onPress={() => navigate('About')}>
                    <Icon name="ios-people" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#37a3da' title = 'Events' onPress={() => navigate('Events')}>
                    <Icon name="ios-calendar" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#91a1c9' title = 'Home' onPress={() => navigate('Home')}>
                <Icon name="ios-home" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#9b59b6' title="cinthy" onPress={() => navigate('Chat')}>
                    <Icon name="md-create" style={styles.actionButtonIcon} />
                </ActionButton.Item>
                <ActionButton.Item buttonColor='#f6ba61' title="careerStats" onPress={() => navigate('Stats')}>
                        <Icon name="ios-pie" style={styles.actionButtonIcon} />
                     </ActionButton.Item>
                    <ActionButton.Item buttonColor='#1abc9c' 
title="jobSearch" onPress={() => navigate('Job')}>`
                    <Icon name="ios-search" style={styles.actionButtonIcon} 
 />
                    </ActionButton.Item>
                 </ActionButton>
            </View>
        );
    }
}

const SimpleApp = StackNavigator({
        Home: {
            screen: HomeScreen,
            navigationOptions:{
            title: 'WELCOME!',
            headerStyle:{ backgroundColor: 'skyblue'},
            headerTitleStyle:{ color: 'black'},
        }
    },
    Chat: { screen: ChatScreen },
    FAQ: {screen: FAQScreen},
    About: {screen: AboutScreen},
    Events: {screen: EventScreen},
    Stats:{screen: CareerScreen},
    Job: {screen: JobSearchScreen}
 });

const styles = StyleSheet.create({
    Main:{
        flex:1,
        backgroundColor: '#f3f3f3'
    },
    actionButtonIcon: {
        fontSize: 20,
        height: 22,
        color: 'white',
    },
});

export default SimpleApp

React Native：所有页面的一个菜单（堆栈导航）

0 个答案: