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

最新推荐文章于 2024-06-25 09:44:25 发布

原创最新推荐文章于 2024-06-25 09:44:25 发布 · 3.5k 阅读

3 ·

CC 4.0 BY-SA版权

React-Native 专栏收录该内容

22 篇文章

订阅专栏

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

项目中有个需求是进入到页面，有个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,
      {
        toValue: height,
        duration: 300,   //动画时长300毫秒
      }).start();
  }

  render() {
    return (
      <TouchableOpacity style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} onPress={this._hiddenTipView}>
        <Animated.View style={{ position: "absolute", top: this.state.securetyTipViewY, backgroundColor: 'red', height: 50, width: 300 }}>
          <View style={{ backgroundColor: 'yellow', width: 300, height: 50 }}></View>
        </Animated.View>
      </TouchableOpacity>
    )
  }
}