第三方库(react-native-side-menu)
安装方法
npm install react-native-side-menu --save
代码(project/side_meum.js)
import React, {Component} from 'react'; import { Platform, StyleSheet, Text, View, Dimensions } from 'react-native'; import SideMenu from 'react-native-side-menu'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); const {width, heihgt} = Dimensions.get('window'); type Props = {}; export default class App extends Component<Props> { constructor(props) { super(props); this.state = { isOpen: false } } render() { const menu = <Text style={{marginTop: 22}} onPress={() => alert('点击了aaa')}>aaa</Text>; return ( <SideMenu menu={menu} //抽屉内的组件 isOpen={this.state.isOpen} //抽屉打开/关闭 openMenuOffset={width / 2} //抽屉的宽度 hiddenMenuOffset={0} //抽屉关闭状态时,显示多少宽度 默认0 抽屉完全隐藏 edgeHitWidth={60} //距离屏幕多少距离可以滑出抽屉,默认60 disableGestures={false} //是否禁用手势滑动抽屉 默认false 允许手势滑动 /*onStartShouldSetResponderCapture={ () => console.log('开始滑动')}*/ onChange={ //抽屉状态变化的监听函数 (isOpen) => { isOpen ? console.log('抽屉当前状态为开着') : console.log('抽屉当前状态为关着') }} onMove={ //抽屉移动时的监听函数 , 参数为抽屉拉出来的距离 抽屉在左侧时参数为正,右侧则为负 (marginLeft) => { console.log(marginLeft) }} menuPosition={'left'} //抽屉在左侧还是右侧 autoClosing={false} //默认为true 如果为true 一有事件发生抽屉就会关闭 > <View style={styles.container}> <Text style={styles.welcome} onPress={() => { this.setState({ isOpen: true }) }}> Open Draw! </Text> <Text style={styles.instructions}> To get started, edit App.js </Text> <Text style={styles.instructions}> {instructions} </Text> </View> </SideMenu> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'blue', marginTop: 22 }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
并在index.js文件中注册
import { AppRegistry } from 'react-native'; import App from './side_meum' AppRegistry.registerComponent('wang', () =>App)
组件属性:
属性 |
默认值 | 类型 | 描述 |
---|---|---|---|
menu | 空的View | React.Component | 一个组件 |
isOpen | false | Boolean | 抽屉打开/关闭 |
openMenuOffset | 屏幕宽度的2/3 | Number | 抽屉打开时的宽度 |
hiddenMenuOffset | none | Number | 抽屉关闭状态时,显示多少宽度 默认0 抽屉完全隐藏 |
edgeHitWidth | none | Number | 距离屏幕多少距离可以滑出抽屉,默认60 |
toleranceX | none | Number | X 轴的偏移量 |
toleranceY | none | Number | Y 轴的偏移量 |
disableGestures | false | Bool | 是否禁用手势滑动抽屉 默认false 允许手势滑动 |
onStartShouldSetResponderCapture | none | Function | Function that accepts event as an argument and specify if side-menu should react on the touch or not. Check https://facebook.github.io/react-native/docs/gesture-responder-system.html for more details |
onChange | none | Function | 抽屉状态变化的监听函数 |
onMove | none | Function | 抽屉移动时的监听函数 , 参数为抽屉拉出来的距离. 抽屉在左侧时参数为正,右侧则为负 |
onSliding | none | Function | Callback when menu is sliding. It returns a decimal from 0 to 1 which represents the percentage of menu offset between hiddenMenuOffset and openMenuOffset. |
menuPosition | left | String | 抽屉在左侧还是右侧 参数为 ‘left’/’right’ |
animationFunction | none | (Function -> Object) | Function that accept 2 arguments (prop, value) and return an object: - prop you should use at the place you specify parameter to animate - value you should use to specify the final value of prop |
animationStyle | none | (Function -> Object) | Function that accept 1 argument (value) and return an object: - value you should use at the place you need current value of animated parameter (left offset of content view) |
bounceBackOnOverdraw | true | boolean | when true, content view will bounce back to openMenuOffset when dragged further |
autoClosing | true | boolean | 如果为true 一旦有事件发生抽屉就会关闭 |