1. 程式人生 > >react-native 踩到坑之 transform skewX skewY

react-native 踩到坑之 transform skewX skewY

提示,本文不能解決問題,但作為一個坑的記錄,經驗教訓

rn版本 0.46

眾所周知,transform是用來變換檢視的屬性,

經實踐,transform各個屬性在ios平臺上執行良好,安卓上的表現與ios不一致。

比較嚴重的是在安卓上skewX、skewY比較扯蛋,skewX不能用,skewY居然是旋轉效果……

經探索谷歌、github,發現,此問題可能暫時得不到解決,rn程式碼貢獻者MaxGraey提到:

I confirm, for Android skew transform is not working.

我確認,無法工作

Digging deep in ReactAndroid's sources I found the following:

Code to transform the view is made very inefficient. In order to apply transformation matrix firstly decompose to scale/rotate/skew/translation and applied separately to view.setTranslationX, view.setTranslationY and etc.

Android's view does't has methods for setSkewX and setSkewY at all. "setMatrix" absent as well!

So I see only two ways:

    1. Use view's setAnimationMatrix.
    2. Subclassing View to obtain direct access to private mRenderNode and his matrix property.
Both way need hard refactoring existing code 看來只有兩種方法: 1.設定檢視的動畫矩陣功能 2.繼承檢視,獲得私有的mRenderNode節點並用它的矩陣屬性

大神提到,兩種方法都很困難。

skewX skewY 這個坑繞過吧。用rotate等多個拼合的方法代替。

相關推薦

react-native transform skewX skewY

提示,本文不能解決問題,但作為一個坑的記錄,經驗教訓。 rn版本 0.46 眾所周知,transform是用來變換檢視的屬性, 經實踐,transform各個屬性在ios平臺上執行良好,安卓上的表現與ios不一致。 比較嚴重的是在安卓上skewX、skewY比較扯蛋,sk

React Native路 — 執行Android專案的各種(Windows)

之前我們已經初始化了一個Raect Native 專案,驗證了Android環境的正確性,接下來就執行起來吧! 執行命令:        ① react-native start        ② react-native run-android 執行步驟: 1.

react native

react native 碰到的幾個坑。記錄如下。 1.com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'n.internals.offset[e]'), stack:

react-native日記

1、在IOS11.3版本中scrollView下的用Text包裹的文字不顯示內容,解決方式:將文字用多個Text分開包裹。 以上會出現閃退的情況,最好是將文字單獨建立HTML檔案然後將其用WebView引入。 android的HTML檔案需要放在android\app\src\main\as

React-native日記(一)

建立頁面跳轉時報錯 undefined is not an object (this.props.navigation.navigate 學習 React-native 的第一個心得就是要做好踩坑的準備,之前剛入手的時候瘋狂紅屏,於是各種百度, 終於可以正常

react-native 紀實(1)- 安裝環境

一、安裝環境 開發rn得裝個nodejs,我機器有,這一步就免了。然後開啟rn的官網 瞄了一下,官網的get start使用的是expo 來進行開發,這個東西我體會了一下就是能快速進入開發狀態。不用裝android-studio,手機裝一個Expo客戶端就直接能用,省

react native記(建立指定的React-Native版本)

建立指定的React-Native版本 剛剛開始學習React Native,很多都不懂,搭建環境的時候遇到了挺多問題的,一直在折騰。 我是按照React Native文件來搭建環境的,安裝react-native-cli使用的是下面的命令。 npm in

React Native

一、遇到過的坑 1.1 執行Downloading https://services.gradle.org/distributions/gradle-2.4-all.zip時報錯 解決方法:複製報錯的下載連結,用迅雷下載, 將專案地址中的AwesomeP

React-NativeTextInput value屬性

 TextInput用法就不多講了,主要記錄下遇到的一個怪問題。     背景:專案需要開發一個充值頁面,需要一個輸入框,然後幾個按鈕,輸入框是允許使用者自己輸入任意金額,按鈕是可以讓使用者快捷選擇

React Native旅 -- 使用iOS原生檢視(高德地圖)

在開發React Native的App的時候,你會遇到很多情況是原生的檢視元件已經開發好了的。有的是系統的SDK提供的,有的是第三方試圖元件,總之你的APP可以直接使用的原生檢視是很多的。React Native提供了一套完善的機制,你可以非常簡單的用來包裝已有

Android原生專案整合React Native

最近在學習React Native,將Android原生專案整合React Native實現混合開發。參考官網和其他一些相關資料,自己動手一步一步操作,發現真的是一步步踩坑再填坑的過程,此文章記錄整合React Native的步驟和出現的問題,方便以後查閱。

React Native 日記

一、TabBarIOS 出現react.children.only expected to receive a single react element child 問題程式碼於示圖: findP

react-native 適用於新學者 ide:visual studio

用書《react native 跨平臺移動應用開發》(第二版)作者:闕喜濤 1.在試執行第一個程式碼時,用VS進行了程式碼編輯,輸入Dimensions時,VS自動添加了如下程式碼 import { Dimensions } from './C:/Users/HP/App

react native

react native 碰到的幾個坑。記錄如下。 1.com.facebook.react.common.JavascriptException: undefined is not an object (evaluating 'n.internals.offset[e]'

react-native開發 ios上react-native-vector-icons 的error:unRecognized font family 'FontAwesome'

RN開發過程中使用了第三方圖示庫,由於對iOS也不是特別熟,所以搞了兩天才跨過去,解決完畢後分享一下,畢竟RN開發資源還是比較稀缺的,多一點貢獻是一點。 解決問題首先第一步那絕對是官網找,react-native-vector-icons github連結地址

React-Native 過的

React Native執行的時候,經常碰到React Native unable to load script from assets index.android.bundle on windows解決方法有2種: 方法一:設定IP和埠 具體步驟:報錯頁面晃動手機,顯示

React Router 從v3升級到v4的

React 應用很少不用react-router這個包的。marknoteapp.com之前一直用v3,看到v4出來後一直心癢。最近,抱著 用新不用舊 的理念,手賤升了一下級。這一升級,差不多2天功夫花掉啦。概述和 Angular 那改朝換代般的升級相比,Rea

React Native環境配置Windows版本搭建

services 就會 wrapper function 新建項目 之前 path ont 系統 接近年底了,回想這一年都做了啥,學習了啥,然後突然發現,這一年買了不少書,看是看了,就沒有完整看完的。悲催。然後,最近項目也不是很緊了,所以抽空學習了H5。自學啃書還是很無趣的

React Native開發】React Native控件ProgressBarAndroid進度條解說(12)

ice 發現 來講 top 文章 func dev all ios 轉載請標明出處:http://blog.csdn.net/developer_jiangqq/article/details/50596367本文出自:【江清清的博客】(一)前言 【好消息】

React Native布局

enter body ima lower posit 不能 效果 ignite 定位 讀懂這篇文章,RN布局不是問題 寬度單位和像素密度 react的寬度不支持百分比,設置寬度時不需要帶單位 {width: 10}, 那麽10代表的具體寬度是多少呢? 不知