앱이 네이티브에 반응하는 작은 트릭 - 오버레이가 있는 사이드 메뉴
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
}
});
어떻게 작동합니까?
Reference
이 문제에 관하여(앱이 네이티브에 반응하는 작은 트릭 - 오버레이가 있는 사이드 메뉴), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/gaserd/small-trick-for-your-app-to-react-native---side-menu-with-overlay-52be텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)