React-Native-開発経験とよくある質問のまとめ

5509 ワード
React Nativeに触れて1ヶ月余りで、このような「Learn once,Write anywhere」のモバイル端末開発フレームワークがますます好きになっています.自分が1ヶ月以上でReact Nativeを身につけたとは言えませんが、ここでは自分が1ヶ月以上踏んだ穴と経験や教訓を共有して記録し、今後も補完していきます.
WebStormを使用したReact Nativeの開発経験
WebStormは本当に最高のReactNative開発ツールの一つだと思います.特にAndroid Studioを使ったことがある場合は、WebStormを使うのが絶対に最高の選択です.
構成によるプロジェクトの直接実行
enter description here
WebStormの右上隅にある小さなボックスの下矢印をクリックし、
Edit Configurations..
enter description here
弾き出したウィンドウで左上の「
+」ボタン、ドロップダウン・オプション選択
React Native”
enter description here
右側の「name」の項目は勝手に記入して、自分で区別すればいいので、デフォルトの運行目標プラットフォームはAndroidなので、運行する目標プラットフォームがiOSであればTarget PlatformをiOSに変更すればいいです.
enter description here
最後にWebStormの実行可能な項目は次のとおりです.
enter description here
Androidを選択し、右側の緑の三角形ボタンをクリックすると、Androidシミュレータまたは実機でReactNativeプロジェクトを実行できます.iOSも同じです.直接実行するのは、あなたのパソコンにアンドロイドシミュレータやXcodeがインストールされていることを前提に、Android端子を実行するときはAndroidシミュレータを事前に起動する必要があります.そうしないと、デバイスが見つからないことを示すので、iOSは操作する必要はありません.さらにWebStormで実行する最も一般的な問題は、8081ポートが占有されていることです.
enter description here
この場合、端末でlsofコマンドでポートを占有するプロセスPIDを検索し、killコマンドでプロセスを殺す必要がある.
enter description here
最善の回避方法は、運転を停止する必要がある場合は、停止ボタンをクリックしてプロジェクトの運転を停止することです.
enter description here
WebStormでのデバッグ
作成したjsファイルでデバッグが必要な箇所にブレークポイントを打ち、WebStormでプロジェクトを実行し、ReactNative実行シミュレータの実行に成功した後にデバッグメニューを呼び出し、Debug JS Remotelyをクリックします(ここではiOSを例に、Androidはほぼ一致します)
enter description here
必要に応じてデバッグできます.ショートカットキーF 8はワンステップデバッグ、F 7はステップデバッグpsである.HTMLタグブロックに打ち込まれたブレークポイントは無効である
enter description here
ListViewコンポーネントのピット
ListViewでrenderHeaderメソッドに画像をロードすると、Android側では表示されず、iOS側では問題はありません.これはReact NativeのBugの一つであり、まだ完全に解決されていない.詳細は、Render a ViewPagerAndroid in ListView.renderHeader()that the elements under ViewPagerAndroid will not displayの現在の一時的な解決策は以下の通りです.

removeClippedSubviewsプロパティは、サブViewが表示領域を超えた場合に自動的に削除されるかどうかを示すため、デフォルトはtrueであるため、falseに設定するとパフォーマンスが犠牲になることは明らかです.しかし、現在の方法はListViewの代わりにFlatListを使用することです.FlatListはListViewよりずっと向上しているからです(ただし、FlatListが同じBugを持っているかどうかはまだテストされていません)
TextInputアセンブリのピット
TextInputはiOS側でheightプロパティを設定する必要があります.そうしないと、フォーカスを取得できません.Android側は設定しません.
レイアウトとスクリーンの適合に関する経験
  • 基本的にすべてのコンポーネントは幅の高さを指定しないほうがいい(画像を除いて、幅の高さを指定しなければならない.そうしないと、画像の元のサイズが表示され、制御しにくい)、幅の高さを指定しないコンポーネントは元のサイズを維持する.これはAndroidのwrap_に似ている.content.
  • React Nativeコンポーネントサイズの数値単位はdpであり、
    • を変換する必要はない.
    flex
    スタイルのflexはAndroidのlayoutに似ていますWeightプロパティ
  • ルートレイアウトでflex:1を指定するとフルスクリーン(viewのデフォルト幅は100%)
    • を表します.
  • 階層レイアウト内の複数のコンポーネントのうちの1つだけがflex:1を指定する場合、コンポーネントは残りのコンポーネントの外の残りの空間
    • を占有することを示す.
  • 階層レイアウトに複数のコンポーネントがflex:1を指定する場合、これらのコンポーネントの割合は同じ
    • であることを示す.
    レイアウト方向flexDirection
    ReactNativeのデフォルトレイアウト方向は縦columnです.この場合、justifyContentは縦揃えを指定します.alignItemsは横揃えを指定します.横揃えはrowを指定します.justifyContentは横揃えを指定します.alignItemsは縦揃えを指定します.
    Imageの調整モードresizeMode
    resizeModeプロパティは、コンテナに対するピクチャの表示方法を調整し、デフォルトではcoverモードです.実際の状況に応じてresizeModeを柔軟に選択します.
    coverモードは、表示スケールが歪まずに表示領域全体を塗りつぶすことのみを求めます.画像を拡大または縮小することができ、表示領域を超えた部分は表示されません.つまり、画像は部分的に表示されない可能性があります.containモードは、画像全体を表示するように要求され、等比縮小することができ、画像が完全に表示され、Imageコントロールの底色が現れる可能性があります.画像の幅がコントロールの幅より小さい場合は、画像は拡大されません.stretchモードは、画像の元の幅、高さ比を維持することを考慮しない.Imageで定義された表示領域全体を塗りつぶします.このモードで表示される画像は奇形や歪みを起こす可能性があります.センターモードは、9月11日の0.33バージョンでサポートされ、containモードでは等比増幅がサポートされています.
    少しの経験:
  • 画像の完全な表示が要求され、画像が純色に近いか、画面の筋道がはっきりしていない場合はstretchを選択することができます.
  • 元のピクチャが表示領域より大きい場合、デフォルトのcoverを使用すると、一部のピクチャ領域が失われ(失われた領域は、設定されたjustifyContentおよびalignItemsに関係する)、ピクチャエッジ領域が重要でない場合はcoverモード
    • を使用することができる.
  • containモードを使用するには、ピクチャの表示領域とピクチャの幅の割合が同じであることを保証することが望ましい.そうしないと、意図的に予想できない適合問題が発生する.

    • iOSがネットワーク情報APIを取得するピット
    NetInfo.isConnected.fetch().done((isConnected) => {
});

    iOSでは、このメソッドの戻り値はfalseであり、Androidでは正常です.
    NetInfo.fetch().done( (connectionInfo) => { } );

    iOSでは、このメソッドの戻り値は常にunknownであり、Androidでは正常です.
    したがって、ネットワークリスニングを追加することで、ネットワークが利用可能かどうかを判断することができる.もちろん、他にも方法があります.具体的には、https://github.com/facebook/react-native/issues/8615次はその中の1つの解決策です.
    function handleFirstConnectivityChange(isConnected) {
    if (!sConnected) {
     // do action
    }
    NetInfo.isConnected.removeEventListener('change', handleFirstConnectivityChange);
}

if (Platform.OS === 'ios') {
    NetInfo.isConnected.addEventListener('change', handleFirstConnectivityChange);
} else {
    NetInfo.isConnected.fetch().then(isConnected => {
    if (!sConnected) {
        // do action
    }
}

    じかんへんかん
    プロジェクトでyyyy-MM-dd hh:mm:ss形式の時間文字列をDateタイプに変換する問題が発生しました.
     let date = new Date(timeStr);

    この方法はAndroid/iOSシミュレータまたはホスト上で変換されたdate値がInvalid Date(Android)/NaN(iOS)であり、デバッグモードではこの値は完全に正常である.今でも解けない.解決策:
    let date = new Date(Date.parse(timeStr.replace(/-/g, "/")));

    この方法を使用して時間変換を行います.
    ページカートンの解決策
    InteractionManager.runAfterInteractionsメソッドでは、ページのすべてのアニメーションを実行してからデータを取得できます.
     componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this._getListData().done()
        })
    }

    RNロードの最初のスクリーンの白いスクリーンは明らかです
    プリロードを使用します.白い画面が表示されるのは、主にjsBundleがメモリにロードされるのに時間がかかるためです.RNの本来の方法は、初めてRNページを開いてからjsBundleをロードすることですが、アプリケーションが起動したときにjsBundleをメモリにロードするために、スペースを方法に変えることができます.
    その他、これからも補完していきます...
    php fopenリモートファイルの関数をダウンロード
    ProgressBarの詳細