《React-Native系列》5、RN实现弹出选择界面与动画效果

今天做了个弹出框，见文章最后图片所示，弹出的时候从屏幕下方弹入，用户选择后又从下方弹出，同时有遮罩效果。

首先，我们是怎么实现弹出框，我这边用的是absolute 绝对定位，包括弹层的覆盖，Dialog的绝对位置。

Dialog的布局在这儿就不说了，flex-box、盒子模型...

那么再来说说动画。

参考：RN动画入门Animated

1、创建一个Animated.Value

          <Animated.View style={ styles.mask } >
          </Animated.View>

          <Animated.View style={[styles.tip , {transform: [{
                translateY: this.state.offset.interpolate({
                 inputRange: [0, 1],
                 outputRange: [height, (height-aHeight -34)]
                }),
              }]
            }]}>
         </Animated.View>

我这里创建了2个，一个是遮罩效果，一个是dialog。

2、Dialog样式编写

 此处略，见后面完整代码。

3、动画效果

首先是显示Dialog的动画：

  //显示动画
  in() {
    Animated.parallel([
      Animated.timing(
        this.state.opacity,
        {
          easing: Easing.linear,
          duration: 500,
          toValue: 0.8,
        }
      ),
      Animated.timing(
        this.state.offset,
        {
          easing: Easing.linear,
          duration: 500,
          toValue: 1,
        }
      )
    ]).start();
  }