RN-第三方之react-native-root-modal、或者modal实现侧栏效果

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 (
            

                {
                        this.showModalByFadeIn();
                }}>
                    
                        touch me show Modal
                    

                

                {
                    // 中间的黑色渐变View
                    (()=>{
                        if (this.state.isShowModal){
                            return (
                                
                                
                            )
                        }
                    })()
                }

                /*
                react-native 自带的modal组件
               */

                //react-native-root-modal 
                

                    
                        {/*动画View*/}
                        

                                {
                                                      this.hideModalByFadeIn();
                                }}>
                                    
                                        touch me hide
                                    
                                
                        

                        {/*右侧点击按钮*/}
                        {
                                              this.hideModalByFadeIn();
                                          }}
                                          activeOpacity={1}
                        />

                    

                


            
        );
    }
}


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);