Android開発Belfryパート1のネイティブのReact

ハブにはネイティブの反応に関する記事がたくさんありますが、誰が誰のために書いているのか理解できません。 ほとんどの人がこのメッセージを持っています。「まあ、これはウェブと同じReactで、携帯電話でのみです。」 しかし、この分野でモバイルデバイスのネイティブ開発に携わっている人々は、詳細な調査なしに2リットルなしでAndroid を使用した後の反応を理解することができないためです。 そして、その反応に対して、突然、Web開発ではなくAndroidに依存することを説明します。 興味のある方は猫の下で歓迎します。

なんで？

リアクションネイティブの主な対象者は、モバイルデバイスに突入したいと思ったWeb開発者と同じであると理解しています。 しかし、なぜモバイル開発者はネイティブの反応に目を向けるべきなのでしょうか？ ネイティブの反応につまずいた瞬間は省略します。数か月間見ており、過去4〜5日間は積極的に研究してきたとしか言いません。 私は、reactがデータを送受信する簡単なアプリケーションを作成する準備ができていることに気付きました。 そして、私はすべてのプロジェクトを思い出し始め、ほとんどのプロジェクトがまれに例外を除いてデータを送受信するだけであることに気付きました。 私ができるほとんどのアプリケーションが反応することがわかりましたか？ ええ、しかしiOSアプリケーションもプラスになります。



もちろん、ネイティブ開発はあらゆる点で優れていますが、いくつかのBUTがあります。



第一に、Androidのネイティブ開発は複雑で小さなことで一杯です。最も一般的な例は画面の回転です。さまざまなソリューションやライブラリがあります。私自身も松葉杖を積んでいます。 しかし、リアクションではすべてがシンプルで、画面を作成しましたが、箱から出てくるターンを忘れることができます。すべてはメインストリームではなく（理解しているように）動作します。基本的にはビューを再描画するだけで、スクリーンの回転はリアクションのコンポーネントの寿命に影響を与えません。



ポイントは、私はかなり長い間アンドロイドのネイティブ開発を行ってきましたが、それでも新しい奇妙な（しかし時には興味深い）問題に対処しなければならないということです。 また、iOS用のアプリケーションが必要な場合、iOS用にネイティブに記述する方法を学習するのにどれくらい時間がかかりますか？ 私はすでにiOSを勉強していて、アプローチの問題に遭遇しました：アプリケーションを書く方法？ パターン、ライブラリ、ベストプラクティスなど。 そして、各プラットフォームのトラブル。 反応の場合、問題もありますが、両方のプラットフォームで共通です。 そこで、私は選択をしました。単純なアプリケーションの場合、反作用力で十分です。困難が始まると、メインの切り札に頼ることができます。つまり、目的のプラットフォーム用にモジュールをネイティブに記述します。 さて、ケーキのチェリーは、「まあ、これはウェブ上と同じReactで、携帯電話だけで」というフレーズも逆の方向に作用します。ウェブ上で方向を変えるのが簡単です

ツール

ここからインストールについて直接読むことができます 。 さらに、あなたがそのミニチュートリアルを読むことを検討します。



もちろん、Androidスタジオのすべてがそれほど便利ではない場合は、コンソールで多くの作業を行う必要があります（スタジオをまったく起動しない場合）が、慣れることができます。 個人的に、私は使用します：

• 原子 + 核種
• コンソール

コマンドする：

react-native run-android
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

仮想デバイスが既に実行されている必要があるという効果がありました。 Androidスタジオは、魔法の緑色のボタンをクリックした後、すべてを行います。ここでは、すべてを手動で行う必要があります。 仮想デバイスを起動するたびにスタジオを起動しないようにするには、Android Virtual Deviceメニューを開きます。







必要なデバイスを起動し、スタジオのコンソールを見ると、次のようになります。

 /Users/spotlight1/Library/Android/sdk/tools/emulator -netdelay none -netspeed full -avd Nexus_5_API_22
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

必要な箇所を書き留めて、仮想デバイスを起動できるチームができました。 その後、特定のアプリケーションを実行するスクリプトを作成できます。



すぐに便利なコマンドを追加してください：

 react-native log-android
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ターミナルでログを見るため。

コンポーネント

これについては、後でアプリケーションを機能させる方法についてはまったく触れません。 また、 ここから例を使用することを明記します。必ず自分ですべてを読んでください。しかし、この記事の後、アイデアに従って、理解しやすくなります。



コンポーネントは基本の基礎です。 まず、コンポーネントをアクティビティまたはフラグメントとして認識する必要があります（ただし、フラグメントは近くなっています）。 ただし、コンポーネントは1つのボタンにすることができます。 しかし、後でそれを理解します。



最も単純なコンポーネント：

 class Simple Component extends React.Component { render() { return ( <Text>Hello world!</Text> // render()     ,    ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコンポーネントは同様のことを行います：







どのコンポーネントにも独自のライフサイクルがあります。詳細については、 こちらをご覧ください 。 私たちは主にこれらにのみ興味があります：

• constructor（）-自分自身のことを言います。これはコンポーネントのコンストラクタです。これは必須のメソッドではありませんが、後で戻ります。
• render（）は、AndroidのsetContentView（R.layout.activity）にほぼ類似したメソッドです
• componentDidMount（）はonCreate（）メソッドに似ていますが、render（）メソッドの直後に呼び出されるわずかに異なる方法です。

componentDidMount（）は、表示する必要のあるデータを取得するためにサーバーにリクエストを行う必要がある場所です。 また、必須のメソッドではありません。



そして、すべてがシンプルですが、データを操作したいですか？ コンポーネントには2つのデータソースがあります。

• 小道具
• 都道府県

小道具は、別のアクティビティを開くときに送信するインテントと考えることができます。 これは、 外部のFROM コンポーネントに転送されるデータです。

そして今明らかに：

 class Greeting extends React.Component { render() { return ( <Text>Hello {this.props.name}!</Text> //  props ); } } class LotsOfGreetings extends React.Component { render() { return ( <View style={{alignItems: 'center'}}> <Greeting name='Rexxar' /> //    props <Greeting name='Jaina' /> <Greeting name='Valeera' /> </View> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それは判明した：







正しくしましょう。 小道具は、コンストラクトによってコンポーネント内で呼び出されます。

 this.props.paramName
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、パラメーターは「名前」と呼ばれます。 さて、中括弧では、小道具だけでなく、一般にすべてのパラメーターを呼び出す必要があります。



次に、小道具を渡す必要があります。

 <Greeting name='Rexxar' />
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

挨拶は、呼び出すコンポーネントの名前であり、スペースの後にすべての小道具を渡します。この場合は「名前」です。



はい、コンポーネントで必要な小道具を明示的に指定しない（または完全に理解できなかった）ことは珍しくありませんが、すぐにコードでそれらが既に存在するかのように呼び出します。 render（）メソッド内だけでなく、コンポーネント内の任意の場所でpropを呼び出すことができることに注意してください。また、propを変更することはできません;来たものは残ります。 典型的なアプリケーションは、クリックしたリストからいくつかの要素のIDを渡して情報をロードすることです。



今状態について。 状態は、コンポーネント自体の可変パラメーターです。 それらをどこかに直接転送することも、外部から受け取ることもできません。 Androidの観点から見ると、これはセッターとゲッターのないプライベートパラメーターのようなものです。 状態は、コンポーネントコンストラクター内で初期化されます。

 class Stopwatch extends React.Component { constructor(props) { super(props); this.state = {seconds: 0}; //     //    seconds    1 setInterval(() => { this.setState({ seconds: (this.state.seconds +1) }); //   setState() }, 1000); render() { return ( <Text>{this.state.seconds}</Text> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての魅力は、状態パラメーターを変更するとrender（）メソッドが呼び出されることです。 つまり このコードは、実際のストップウォッチを取得するのに十分であり、カウンターは個別に更新されます。



実際、コンポーネントについてです。 アプリケーション自体はどのように機能しますか？ すべてが非常に簡単です。index.is.jsとindex.android.jsの2つのエントリポイントがあり、誰でもわかります。 そして、この行は実際のエントリポイントです。

 AppRegistry.registerComponent('folderName', () => App);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「FolderName」はプロジェクトのルートフォルダーの名前であり、変更できません。 Appは、メインコンポーネントとして使用するコンポーネントの名前です。 メインアクティビティのようなものです。

コード記述のイデオロギー

リアクティブニュートラルを書き始めたばかりのとき、私は最も単純な質問に落ち着きました。 最も簡単なログイン画面を考えてみましょう：2つのEditTextと1つのボタン。 理由はわかりませんが、本能レベルでは、これをバニラAndroidのように実装しようとしました。 ライブラリなしのMVC：ボタンをクリックするだけで、これらのEditTextの値を取得し、最初に検証した後、必要に応じて送信します。 そのように考えようとしないでください。



しばらくして、トグルスイッチが私の頭の中でクリックし、それが私に気づきました-Androidのリアクティブネイティブとデータバインディングはほとんど同じものです（まあ、そうではありません）。 ただし、このアプローチは実質的に1分の1です。2番目の記事で既に、Androidのデータバインディングに慣れていないことを強くお勧めします。 それ以外の場合、この記事はまったく役に立ちません。



始めるために、データバインディングを使用する場合、Androidでxmlがどのように見えるかを見てみましょう。

 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Login" android:text="@={model.login}" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:text="@={model.password}" /> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:onClick="@{() -> model.login()}" /> </LinearLayout>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、これが反応ネイティブでどのように見えるかです：

 export default class LoginScreen extends React.Component { constructor(props) { super(props); this.state = { login: null, //  ObservableField  Android password: null }; }; //  login() { if(this.state.login === null) { //     } } render() { return( <View> <TextInput onChange={(event) => this.setState({ login: event.nativeEvent.text })} /> <TextInput onChange={(event) => this.setState({ password: event.nativeEvent.text })} /> <Button onPress={() => this.login()} //1  1   data binding title="Login"/> </View> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さて、どのようにそれが好きですか？ 個人的には、react nativeでの書き方に関する私の質問はすべて消えてしまいました。ここでは、命令的なスタイルではなく、反応的なスタイルで書きます。 TextInputコンポーネントにはonChangeTextメソッドがあるとすぐに言いますが、何らかの理由で入力されたテキストを返しませんでした。

次は？

React Nativeの学習時に疑問点があった点をすべてハイライト表示しようとしたので、 これを続行する必要があります。アイデアによると、すべてが明確になるはずです。

さて、問題を受け取って解決するので、私は自分でアプリケーションを作成します。さらに記事を書きます。



第二部 。