npm 包 rn-pss 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

rn-pss 是一个 React Native 组件，可以用于实现类似于 iOS Push 动画效果的页面切换效果。它基于 React Native 自带的 Animated API 开发，可以轻松添加页面切换过渡动画效果，并支持各种自定义属性设置。

安装

rn-pss 可以通过 npm 安装，打开终端，进入 RN 项目目录，运行下列命令：

npm install rn-pss

使用教程

引入组件

在你的 RN 项目中，打开需要添加页面切换效果的页面组件，首先需要引入 rn-pss 组件：

import PSS from 'rn-pss';

添加动画效果

在渲染页面的 JSX 中，将希望添加动画效果的组件包裹在 <PSS> 标签内，并且添加 animation 属性：

<PSS animation={'PushLeft'}>
  <View style={styles.container}>
    <Text style={styles.text}>这是一个有动画效果的页面</Text>
    <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
      <Text style={styles.text}>返回</Text>
    </TouchableOpacity>
  </View>
</PSS>

其中 animation 属性的值可以是预设的字符串数组之一：

PushLeft: 页面从左边推入；
PushRight: 页面从右边推入；
PushUp: 页面从下方推入；
PushDown: 页面从上方推入；
Modal: 页面以模态框的形式展示。

自定义属性

rn-pss 还支持自定义属性设置。比如，可以为动画效果添加 duration 属性，用于控制动画执行的时间：

<PSS animation={'PushRight'} duration={500}>
  <View style={styles.container}>
    <Text style={styles.text}>这是一个有动画效果的页面</Text>
    <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
      <Text style={styles.text}>返回</Text>
    </TouchableOpacity>
  </View>
</PSS>

目前 rn-pss 支持的自定义属性有：

duration：动画执行的时间，单位为毫秒（默认为 300）；
delay：动画执行的延迟时间，单位为毫秒（默认为 0）；
easing：动画执行的缓动函数，可以设置为 Easing 对象中的一个函数（默认为 Easing.inOut(Easing.quad)）；
startValue：动画执行前的初始值，可以为数字或者数组；
endValue：动画执行后的结束值，可以为数字或者数组；
useNativeDriver：是否使用原生驱动执行动画（默认为 false，需要 RN 版本在 0.62 及以上）。

例如，可以通过添加 startValue 和 endValue 属性，为页面切换效果添加旋转动画：

<PSS animation={'Modal'} startValue={0} endValue={1} duration={1000}>
  <View style={styles.container}>
    <Text style={styles.text}>这是一个有动画效果的页面</Text>
    <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
      <Text style={styles.text}>返回</Text>
    </TouchableOpacity>
  </View>
</PSS>

示例代码

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ --- ---- ---------

----- ---------- ------- --------- -
  -------- -
    ------ -
      ----- -------- ----- -- ----------- --------- --------------- -------- ---
        ----------------- ----------- -- -------------------------------------------
          ------------------------
        -------------------
      -------
    --
  -
-

----- ------------- ------- --------- -
  -------- -
    ------ -
      ---- ------------------- -------------- ------------ ----------------
        ----- -------- ----- -- ----------- --------- --------------- -------- ---
          ----- -------- --------- -- ----------------------
          ----------------- ----------- -- --------------------------------
            ----- -------- --------- --- ---------- -- ------------
          -------------------
        -------
      ------
    --
  -
-

------ ------- ----- --- ------- --------- -
  -------- -
    ------ -
      ---------------------
        -----------------
          ------------- ----------- ---------------------- --
          ------------- -------------- ------------------------- --
        ------------------
      ----------------------
    --
  -
-

总结

rn-pss 是一个非常实用的 React Native 组件，可以帮助开发者快速实现页面切换效果，并可以自定义动画属性，实现更为具有个性化的动画效果。希望本篇文章可以给初学者带来一些帮助，也希望大家可以在实际开发中更好地应用这一组件。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005551581e8991b448d24a1