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