앱이 네이티브에 반응하는 작은 트릭 - 오버레이가 있는 사이드 메뉴

13887 단어 javascriptreact


안녕하세요 여러분!

나는 React Native를 좋아하고 몇 개의 기사를 썼습니다.



  • 네, 이것은 사이드 메뉴에서 오버레이 보기를 만드는 방법에 대한 가장 인기 있는 질문입니다.

    SideMenu.js

    import React, { Component } from 'react';
    import {
        View, 
        Text 
    } from 'react-native';
    
    import MenuList from './containers/MenuList'
    import MenuOverlay from './containers/MenuOverlay'
    
    import styles from './style/SideMenuStyle'
    
    export default class SideMenu extends Component {
        render() {        
            let { 
                navigation,
                onToggleMenu 
            } = this.props
    
            return (
                <View style={styles.container}>
                    <MenuOverlay 
                        onToggleMenu={onToggleMenu}
                        navigation={navigation}
                    />
                    <View style={styles.menu}>
                        <MenuList 
                            onToggleMenu={onToggleMenu}
                            navigation={navigation} 
                        />
                    </View>
                </View>
            );
        }
    }
    


    ./style/SideMenuStyle

    import { StyleSheet, Dimensions } from 'react-native';
    
    let width = Dimensions.get('window').width
    let height = Dimensions.get('window').height
    
    export default styles = StyleSheet.create({
        container : {
            flex: 1,
            position : 'absolute',
            left: 0,
            top: 0,
            width : width, 
            height : height,
            paddingTop : 10,
            paddingLeft : 10,
            paddingRight : 10,
            paddingBottom : 10
        },
        menu: {
            flex: 1,
            backgroundColor: '#FFF',
            position : 'absolute',
            left: 0,
            top: 0,
            width : width * 0.8, 
            height : height,
            paddingTop : 10,
            paddingLeft : 10,
            paddingRight : 10,
            paddingBottom : 10
        },
        menuItem : {
            paddingTop : 10
        }
    });
    
    


    MenuOverlay.js

    import React, { Component } from 'react';
    import {
        TouchableHighlight,
        Text
    } from 'react-native';
    
    import styles from '../style/MenuOverlayStyle'
    
    export default class MenuOverlay extends Component {
    
        render() {
    
            return (
                <TouchableHighlight 
                    onPress={() => {
                        this.props.onToggleMenu()
                    }}
                    style={styles.overlay}>
                    <Text></Text>
                </TouchableHighlight>
            );
        }
    }
    


    ../style/MenuOverlayStyle

    import { StyleSheet, Dimensions } from 'react-native';
    
    let width = Dimensions.get('window').width
    let height = Dimensions.get('window').height
    
    export default styles = StyleSheet.create({
        overlay: {
            backgroundColor: 'rgba(52, 52, 52, 0.8)',
            position : 'absolute',
            left: 0,
            top: 0,
            width : width, 
            height : height,
            paddingTop : 10,
            paddingLeft : 10,
            paddingRight : 10,
            paddingBottom : 10
        }
    });
    


    어떻게 작동합니까?

    좋은 웹페이지 즐겨찾기