react-native開発ノート(一)
1258 ワード
react-native開発ノート
react-nativeを使って製品開発を開始しました.今日出会ったピットについて説明します.
TabBarIosの使用
一般的なappのデザインはホームページが一つのtabページです.私たちのアプリ製品も例外ではないので、このiOS専用のコンポーネントを使いました.
遭遇した問題アイコンサイズの適合問題は設計された設計原稿の2 Xのために切断された図は全部2倍であり、これによってアイコンが大きくなり、ドキュメントをひっくり返して、1つの active色の問題はこれは問題ではないです.優勢です.一般的にwebの開発をしていますが、アイコンフォントでないと、画像の選択と非選択に切り替えます.react-nativeでは、そんなに複雑な必要はありません.一枚の写真を準備するだけで、構成によって解決できます.
Navigatorの使用
私が使っているreact-nativeのバージョンは0.44で、このバージョンの中にNavigatorというコンポーネントが除去されていますので、非公式バージョンの中で問題が発生しました.バージョンの問題が原因かどうかは優先的に確認してください.でも、残念なことに、react-namiのヒントはよくできました.なvigatorを
flexboxの使用
もしあなたが1つのViewを
flexboxサイズは1、2の最終比率で計算されていますので、実際に設計された原稿のピクセルによってflexの値を設定できます.例えば、
react-nativeを使って製品開発を開始しました.今日出会ったピットについて説明します.
TabBarIosの使用
一般的なappのデザインはホームページが一つのtabページです.私たちのアプリ製品も例外ではないので、このiOS専用のコンポーネントを使いました.
遭遇した問題
{{uri: base64Icon, scale: 2}}のような配置しか見つけられませんでしたが、ローカル画像はとりあえず手動でbase 64文字列に変換してから使うことはできません.探しに来て、Imageコンポーネントの中で見て、ピクチャーは方案に適して、もしピクチャーを保存するならば[email protected]でも使えますか?結果は喜ばしいものである.Navigatorの使用
私が使っているreact-nativeのバージョンは0.44で、このバージョンの中にNavigatorというコンポーネントが除去されていますので、非公式バージョンの中で問題が発生しました.バージョンの問題が原因かどうかは優先的に確認してください.でも、残念なことに、react-namiのヒントはよくできました.なvigatorを
react-native-deprecated-custom-componentsという別々のカバンに移しました.インストールして参照してください.flexboxの使用
もしあなたが1つのViewを
flex:1に設定すると、デフォルトでは残りの垂直空間がいっぱいになります.これは開発者を困惑させるかもしれませんが、どうやって高度が私の考えと一致しないですか?残りのビューの高さを正確に設定すれば、これらは解決されます.だから開発する時はできるだけ外の枠のサイズを優先的に設定したほうがいいです.このようなレイアウトが合理的に見えるようになったら、他のレイアウトを開発しても大丈夫です.flexboxサイズは1、2の最終比率で計算されていますので、実際に設計された原稿のピクセルによってflexの値を設定できます.例えば、
width: 150pxはflex: 150に設定されています.ちょうど対応しています.