QQ20170913-133443.gif
本文內(nèi)容闽烙，采用modal方式的側(cè)欄效果
思路
1、點(diǎn)擊按鈕彈出modal（沒有背景色）声搁，在modal上面加了一個leftView黑竞，當(dāng)modal顯示的時候，leftView有一個從左到右的動畫效果
2疏旨、關(guān)于中間漸變的黑色圖層很魂，當(dāng)modal顯示的時候，在頁面上添加了一個opacityView（透明的）檐涝，動畫效果的透明度改變遏匆，和leftView的動畫一起進(jìn)行法挨。
3、點(diǎn)擊黑色的背景隱藏leftView,其實modal上的View有兩個子view幅聘，一個是leftView（寬度 = 屏幕的寬 - 100）凡纳，一個是右側(cè)的透明的TouchableOpacity（寬度 = 100），點(diǎn)擊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); // 左側(cè)向右動畫初始值帝蒿，默認(rèn)為0
this.fadeInAnimated = new Animated.Value(0); // 漸隱動畫初始值荐糜，默認(rèn)為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);
// 組動畫葛超，組內(nèi)動畫同時執(zhí)行
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>
{/*右側(cè)點(diǎn)擊按鈕*/}
<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);
