QQ20170913-133443.gif
本文内容，采用modal方式的侧栏效果
思路
1、点击按钮弹出modal（没有背景色），在modal上面加了一个leftView，当modal显示的时候，leftView有一个从左到右的动画效果
2、关于中间渐变的黑色图层，当modal显示的时候，在页面上添加了一个opacityView（透明的），动画效果的透明度改变，和leftView的动画一起进行。
3、点击黑色的背景隐藏leftView,其实modal上的View有两个子view，一个是leftView（宽度 = 屏幕的宽 - 100），一个是右侧的透明的TouchableOpacity（宽度 = 100），点击TouchableOpacity隐藏modal
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
Animated,
Easing,
Dimensions,
LayoutAnimation,
} from 'react-native';
import Modal from 'react-native-root-modal';
import {Manager as ModalManager} from 'react-native-root-modal';
const screenWidth = Dimensions.get('window').width;
const screenHeight = Dimensions.get('window').height;
const leftWidth = screenWidth - 100;
const leftSpace = 100;
export default class rootModal extends Component {
constructor(props) {
super(props);
this.marginLeftValue = new Animated.Value(0); // 左侧向右动画初始值，默认为0
this.fadeInAnimated = new Animated.Value(0); // 渐隐动画初始值，默认为0，透明
this.state = {
isShowModal: false,
};
this.showModalByFadeIn = this.showModalByFadeIn.bind(this);
this.hideModalByFadeIn = this.hideModalByFadeIn.bind(this);
}
/*显示浮层*/
showModalByFadeIn() {
this.setState({
isShowModal: true
},()=>{
this.marginLeftValue.setValue(0);
// 组动画，组内动画同时执行
Animated.parallel([
// 从左向右的动画效果
Animated.timing(
this.marginLeftValue,
{
toValue: 1,
duration: 500,
easing: Easing.linear
}
),
// 透明度变化的动画效果
Animated.timing(
this.fadeInAnimated, {
toValue: 0.7, // 1为不透明
duration: 500,
easing: Easing.linear
}
)]
).start()
});
}
/*隐藏浮层*/
hideModalByFadeIn() {
Animated.parallel([
Animated.timing(
this.marginLeftValue,
{
toValue: 0,
duration: 500,
easing: Easing.linear
}
),
Animated.timing(
this.fadeInAnimated, {
toValue: 0, // 1为不透明
duration: 500,
easing: Easing.linear
}
)
]).start(()=> {
this.setState({
isShowModal: false
})
});
}
render() {
const movingMargin = this.marginLeftValue.interpolate({
inputRange: [0, 1],
outputRange: [-leftWidth, 0]
});
return (
<View style={styles.container}>
<TouchableOpacity
style={{marginTop: 20, height: 44, marginHorizontal: 0, alignItems: 'center', backgroundColor: 'red'}}
onPress={()=>{
this.showModalByFadeIn();
}}>
<Text style={{lineHeight: 44}}>
touch me show Modal
</Text>
</TouchableOpacity>
{
// 中间的黑色渐变View
(()=>{
if (this.state.isShowModal){
return (
<Animated.View style={[styles.modalStyle,
{backgroundColor: 'black',
width: screenWidth,
height: screenHeight,
position: 'absolute',
opacity: this.fadeInAnimated}]}>
</Animated.View>
)
}
})()
}
/*
react-native 自带的modal组件
<Modal style={styles.modalStyle}
visible={this.state.isShowModal}
transparent={true}
animationType='fade'
>*/
//react-native-root-modal
<Modal style={styles.modalStyle}
visible={this.state.isShowModal}
>
<View style={{marginTop: 0,
marginLeft: 0,
width: screenWidth,
height: screenHeight,
flexDirection: 'row',
}}>
{/*动画View*/}
<Animated.View style={{marginTop: 0,
marginLeft: movingMargin,
width: leftWidth,
height: screenHeight,
backgroundColor: 'white',
}}>
<TouchableOpacity style={styles.downViewStyle}
onPress={()=>{
this.hideModalByFadeIn();
}}>
<Text style={{lineHeight: 50}}>
touch me hide
</Text>
</TouchableOpacity>
</Animated.View>
{/*右侧点击按钮*/}
<TouchableOpacity style={styles.rightStyle}
onPress={()=>{
this.hideModalByFadeIn();
}}
activeOpacity={1}
/>
</View>
</Modal>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
textStyle: {
marginTop: 200,
marginLeft: 100,
textAlign: 'center',
backgroundColor: 'red',
height: 44,
lineHeight: 44
},
modalStyle: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
downViewStyle: {
height: 50,
marginHorizontal: 0,
backgroundColor: 'green',
marginTop: screenHeight - 50,
alignItems: 'center',
},
rightStyle: {
marginTop: 0,
marginRight: 0,
width: leftSpace,
height: screenHeight,
}
});
AppRegistry.registerComponent('RNProjectTestApp', () => rootModal);
