RNツインズエフェクト
1.技術的なシステムの問題
近いノードRNの動作環境に実際には、フロントエンドに関して、RNと共通の抽象化層を反応させます
ReactNative =リアクト+ IOS +アンドロイド
RNの文書を見たとき、私はコンテンツスタート基礎の部分は高度章では、IOSとAndroidのAPIの多くを説明するの導入に反応していることを見つけるだろう
2.コンポーネントの設計上の問題
AndroidとiOSのデザイン要素のいくつかはケースのみリアクト上のコンポーネントを返却していたことを意味し、一般的ではありません、RNは、あなたはなぜこれほど、プラットフォームコンポーネントの2つのバージョンを返すかを決定する必要があるかもしれませんか?多くのコンポーネントのために、2つのプラットフォーム間のスタイルの違いが大きすぎるので、それだけで分割して支配することができます。
3.静的リソース
RN一般的なアプリケーションとWebアプリケーションのいくつかの生得の差があり、RNアプリケーションは、所定の静的リソースに埋め込むことができる、つまり、それはいつでも要求を必要とせず、ローカルに静的リソースを使用することができ、およびWebアプリケーションは、このリソースを使用しようと少なくとも一つのネットワーク要求とキャッシュを通過する必要がありますが、ユーザーはまだ強いクリアキャッシュ操作を燃やしすることができます。
これは、静的リソースから開始することができるかもしれパフォーマンスの最適化を行うとき、私は以下の記事は読んだ、ということを意味し 、ベストプラクティスをレンダリングネイティブ最初の画面に反応探ります
静的プレースホルダファイルを介して倍にマッピングすることができRNを最適化するための新しい方法を学びます。もちろん、時間の思考の多くは、最適化が反応し、RNも共通している、例えば、
- 事前にキャッシュされたリソース
- 遅延ロードなどの長いリスト
4.発効にラベルを付けます
- <div> <ビュー>を使用し、それを使用することはできません
- <P>タグは、<テキスト>を使用し、それを取ることはありません。
- ノーの<img>、および<画像>に置き換えます
- 背景には、あなたは、このコンポーネントを使用することができますImageBackground
- リストは、そのリストビューコンポーネントでUL /李の友人、兄弟を使用することはできません
- さまざまな入力は、あなたは〜ネイティブコントロール、などのTextInput、ピッカー、スイッチ、スライダーを対応する入力タグを使用することはできません
5.イベントコアの問題
Web開発(JS私は唯一のイベントをダブルクリックして覚えて長いプレスイベントではありません)、クリックイベントがコアであり、そして携帯端末に向けたRNに、タッチイベントの位置が大幅に強化され、それに加えて、また、プレスイベントから派生
- onPressOutなど
- onLongPressなど
6.CSS3プロパティは、アニメーション効果を使用するには完全に変更、制限されています
CSSが上がっているので、私は、働いていない午前CSS /アニメーションは、基本的なトーンは、ネイティブUIとのブリッジを構築することです
仮想ビューの進化に7.仮想DOM
REACTでは、仮想現実シミュレーションDOM DOMノードを使用します
RNは何のDOMを持っていないためRNでは、このオブジェクトは、人生台中の元の表示に対応し、仮想ビューに置き換えられます
8.UI変更を発表しました
(以下から参照: http://blog.ilibrary.me/2016/12/25/react-native-internal)
左分のUIの説明とプレゼンテーション。
- ページが機能すべきかのHTMLのテキスト記述、CSSは次のようになり、ブラウザに指示します。
- 事前定義されたUIコントロールのカラムの数に換算し、HTMLやCSSを解析して、ブラウザエンジン、
- そして、ユーザに提示画像を描画する描画命令にオペレーティングシステムのUIコントロールを呼び出します。
- 主に応答HTML内のユーザーイベントの数、DOM操作、非同期ネットワーク要求と、いくつかの簡単な計算のために使用されている不要のJavascript、。
ネイティブ内部を反応において、1及び2は、関数は、スタイルシートがどのように見えるべき各制御のためのブラウザエンジンに指示するHTMLページ記述言語でも同じであるが、。そして、同じエンジンを搭載したブラウザ。
もはや存在ステップ3 UIコントロールブラウザ組み込みコントロール、しかしネイティブUIは、独自の実装を制御反応(二、アンドロイドセットを、IOSのA)、ハンドオーバがMessageQuequeで行われ、さらにれますあなたは、彼らのタグが同じでないことがあります。参考リンク:http://blog.ilibrary.me/2016/12/25/react-native-internal
RNグランドビューガーデン
- IOS9は無効であるネットワークイメージリソースをロードするために、HTTPS、HTTPサポート
- React-native内置babel转换器和ES6的polypill
- RN使用的引擎是safari的引擎而我们一般调试的时候用的是Chrome的V8引擎
- 遇到频繁修改属性的场景,为了避免影响性能,建议使用setNativeProp直接修改属性,而不是走setState的流程
- 测试元素和包裹容器的距离,在普通场景中我们可能会考虑scrolltop,offsetTop等一堆属性,在RN中可以通过一个方法,叫measure和measureLayOut,能分别测以某个元素为参考点的相对位置和绝对位置
- RN相对于普通web应用,增加了一个属性叫hsl,可以指定:色度-饱和度-亮度,是不是感觉和rgba很类似的作用呀
- 如果访问的一些API,但是RN平台暂时没有做封装,就需要自己用Object-C或者Android实现
- 数据库: RN是移动端应用,那不就意味着可以用Android等的数据库或者文件系统了吗? 在RN中这似乎被封装成了AsyncStroage,如果觉得API还不能满足的话,可以用社区里的一个高性能的RN库——realm
- 后台任务可以很方便的用了,就像web-worker一样
- 编写跨平台代码时候,RN专门提供了Platform对
- Plaform.OS: 返回平台名称,比如iOS或者android
- Plaform.Version: 返回版本
- Plaform.select: 方法,接收一个对象,可以分别指定ios和android环境下的返回值,酌情返回
12.导航有提供专门的模块:比如react-navigation和react-native-navigation
13.动画要用Animated控件,不能自己写CSS3的动画属性了,比如Animation和transition