React Native 动画之View 从底部滑出，然后滑下去

一点心≈

于 2019-05-10 20:21:22 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： React-Native

本文链接：https://blog.youkuaiyun.com/baihailing/article/details/90082881

本文介绍如何在React Native项目中创建一个View从底部滑出并滑动到一定高度的效果。通过在componentDidMount()中设置动画，并在点击事件中实现滑回，详细步骤包括动画实现及录屏展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中有个需求是进入到页面，有个view 是需要从底部滑出，滑倒一定高度，当点击button 是再滑回原来的地方。研究了半天，React Native 的动画，写了一个简单的Demo：

(1)在componentDidMount()方法里从底部滑出view;

(2)点击页面的空白处，view 滑下去。

import React, { Component } from 'react';
import {
  AppRegistry,
  View,
  Animated,
  Dimensions,
  TouchableOpacity
} from 'react-native';
import FadeInView from './FadeInView';

const { width, height } = Dimensions.get("window");

export default class App extends Component {

  constructor(props) {
    super(props)

    this.state = {
      securetyTipViewY: new Animated.Value(height),
    }
  }

  componentDidMount() {
    this._showTipView()
  }

  //展示View
  _showTipView = () => {
    Animated.timing(
      this.state.securetyTipViewY,
      {
        toValue: height - 254 - 64,
        duration: 300,   //动画时长300毫秒
      }
    ).start();
  }


  //隐藏view
  _hiddenTipView = () => {
    Animated.timing(
      this.state.securetyTipViewY,
      {