react-native-loader集成問題記錄

Android iOS通用的;一個可用於做loading動畫的組件:https://github.com/mohebifar/react-native-loader

感覺動畫效果還可以,就拿來用了。
但是在新版RN上有些問題,需要修改。
在此記錄下

基於RN-0.62.2 React-16.11.0,存在以下問題
在這裏插入圖片描述

查看https://github.com/react-native-community/art下的說明:

Migrating from the core react-native module

To migrate to this module you need to follow all the installation instructions above and change your imports from:

import {ART} from 'react-native';
const {Surface, Shape} = ART;

to:

import {Surface, Shape} from '@react-native-community/art';

因此需要安裝@react-native-community/art,並修改ART模塊下的數據導入方式

npm install @react-native-community/art --save

回到react-native-loader中,修改/src/下組件內導入ART模塊的方式;
以Bar.js爲例:


// const { Surface } = ART;  //原來的方式修改爲下面的方式
import { Surface } from '@react-native-community/art';

完成!

代碼跑起來以後,又出現了一個warning提示
在這裏插入圖片描述
大致原因是新版下Animated使用動畫過程需要制定userNativeDriver屬性,取值爲true或false。因此看下/src/目錄下的組件代碼裏面使用Animated是不是沒設置。
以Bar.js爲例:

animate(index) {
    Animated
      .sequence([
        Animated.timing(this.state.bars[index], {
          toValue: this.props.size * 2.5,
          duration: 600,
          useNativeDriver: false, // 添加這一行
        }),
        Animated.timing(this.state.bars[index], {
          toValue: this.props.size,
          duration: 600,
          useNativeDriver: false, // 添加這一行
        })
      ])
      .start(() => {
        if (!this.unmounted) {
          this.animate(index);
        }
      });
  }

OK,重新reload下,warning窗口沒了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章