Expoの使用にはさまざまな問題があるため、Expoを開発に使用することをあきらめました。それでも、開発には完全なサウンドトラック環境を使用してください。

開発する前に、HMRが有効であることを証明するために簡単なテストを行いました。

私が使用する反応ネイティブバージョンは0.57です

my-app / App.jsを開きます

次のコードを変更しました

保存後、コンソールはすぐにコンパイルされ、クライアントは約1秒後に自動的に更新されます。HMRはいいところだそうです〜

書き続ける前に、私は再びconstスタイルに興味を持ちました。私は以前にいくつかのreactjsを書いたことがありますが、この種の執筆を見たことがありません。おそらく、スタイルに関係していると思います。最初に変更させてください

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>//对应下边的styles里的container样式
        <Text>This is the frist app with expo!</Text>
        <Image
          style={{width:44, height: 33}}
          source={{uri:'https://res.smzdm.com/images/emotions/68.png'}}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F00',//改了一下，原来是#FFF
    alignItems: 'center',
    justifyContent: 'center',
  },
});

はは、赤くなった。少し怖い。わかりました、それが何のためにあるかを知っています。

次のステップはサードパーティのコンポーネントをインストールすることです私はいつもant.designコントロールが好きでした。実際に戦う機会がなかったので、今度はやってみました。

ctrl + cを使用して、コンソールでプロジェクトを停止し、コンソールに入力します。cnpmをインストールした学生のためにプロジェクトをインストールする必要はありません。現在、npmは非常に遅いです。

cnpm install antd-mobile-rn --save

プロジェクトを開始し、モバイルクライアントを開きます。

ant.desginの公式ウェブサイトのチュートリアルに従ってApp.jsの先頭に追加します

import Button from 'antd-mobile-rn/lib/button';

保存するとすぐにエラーが発生しました、OMG。

「ant.-mobile-rn / lib / button」を「App.js」から解決できません

どうしたの、はい。私は怠け者で、百度に直接問題があります。まあ、同じケースはありません。自分で解決してください。通常のコントロールは正常です。問題は導入されたコントロールにあるようです。node_modulesを見て、ant-mobile-rnのフォルダーにあるショートカットの小さなアイコンを見つけます。インターネット検索はソフトリンクであることが判明しました（私はwin10システムを使用しました）ハイエンドすぎるため、フォルダのプロパティには表示されず、通常のフォルダにすぎません。再びcnpmを見つけましたが、スペースを節約するためにcnpmがソフトリンクを使用していることがわかりました。

オンラインで検索した後は、cnpmを使用できません。そうでない場合、モジュールが見つからない、またはnpmを正直に使用するなどのさまざまな問題が発生します。ここで、最初にGITクライアントTaobaoミラーをインストールする必要があります

淘宝網ソースを使用する場合は、この記事を参照してください

antdはオンデマンドのロードをサポートしています。最初に実行します

cnpm install babel-plugin-import --save-dev

その後、プラグイン：[ "インポート"、 { "LIBRARYNAME"： "antdモバイル-RN"}]]、 babel.config.js加えライン上を

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [["import", { "libraryName": "antd-mobile-rn" }]],
  };
};

再起動後、App.jsヘッダーに追加

import { TabBar } from 'antd-mobile-rn';

間違えても大丈夫です。シンプルなモールを作成します。最初に降りて、一番下のTabBarを取得します。

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { TabBar } from 'antd-mobile-rn';

export default class App extends React.Component {
  render() {
    return (
        <TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="#ccc" >
          <TabBar.Item title="Index" ></TabBar.Item>
          <TabBar.Item title="My"></TabBar.Item>
        </TabBar>
    );
  }
}

コンパイル後の電話の表示

ボトムバーみたい

その結果、同じコードがiPhoneの下に配置され、赤いフレームが報告されます。その理由は、TabBar.Itemに値がないためです。2組の通訳はまだ同じではないようです。

また、iPhoneではwebp形式の画像ファイルに対応していないようです。これが解決策です。まだ試していません。まずjpgを使ってみましょう。

突然画面の調整に問題があることがわかりました。各画面の幅は異なります。調整を行うための解決策は次のとおりです。

https://blog.csdn.net/sinat_17775997/article/details/53728454

続く

ディディクス

公開された18元の記事・ウォンの賞賛5 ・ビュー3484

プライベートの手紙の懸念

ドキュメンタリーの反応ネイティブなステップ（2）-開発用のサードパーティコンポーネントのインストール

Expoの使用にはさまざまな問題があるため、Expoを開発に使用することをあきらめました。それでも、開発には完全なサウンドトラック環境を使用してください。

おすすめ