Clever Geek Handbook

React Native Guide-iOSアプリの作成 パート1.4-1.5

→翻訳はこちらから

→続き。 以前の問題：



4.ランダムな壁紙のフィルタリングと選択



このセクションでは、特定のカテゴリから特定の数のランダムな壁紙を選択します。 このセクションでは、React NativeよりもJSについて説明します。 乱数を生成する新しいモジュール（ファイル）を作成します。 「モジュール」の概念がよくわからない場合は、 モジュールに関するNode.jsのドキュメントを参照することをお勧めします 。

クラスを宣言する行を見つけます 

class SplashWalls extends Component{/* ... */};


そしてその上に次の行を追加します。 この行では、表示するランダムに生成された壁紙の数が格納される定数を宣言します。 

 const NUM_WALLPAPERS = 5;


次に、乱数を生成するモジュールを作成します。 モジュールには2つの機能があります。 それらを見てみましょう：



これらの機能を組み合わせることができますが、私は高品質のコードにコミットしているため、単一責任原則、SRP（ Wiki ）の原則に従います。 SRPは、すべての機能が1つのことを実行する必要があり、それ以上のことは行わないと言っています。 優れたプログラミングの原則に従うことで、将来の頭痛から解放されます。

index.ios.jsファイルと同じディレクトリに新しいファイルを作成します。 このファイルで関数を直接作成できますが、別のファイルで関数を選択すると、乱数を生成する必要がある他のプロジェクトでそれらを使用できます。 さらに、これはindex.ios.jsファイルコードを詰まらせません。

新しいRandManager.jsファイルに名前を付けます。 その内容は次のとおりです。 

 module.exports = { uniqueRandomNumbers(numRandomNumbers, lowerLimit, upperLimit) { var uniqueNumbers = []; while( uniqueNumbers.length != numRandomNumbers ) { var currentRandomNumber = this.randomNumberInRange(lowerLimit, upperLimit); if( uniqueNumbers.indexOf(currentRandomNumber) === -1 ) uniqueNumbers.push(currentRandomNumber); } return uniqueNumbers; }, randomNumberInRange(lowerLimit, upperLimit) { return Math.floor( Math.random() * (1 + upperLimit - lowerLimit) ) + lowerLimit; } };


ファイルを保存します。 ここで、モジュールをindex.ios.jsファイルにインポートする必要があります。 これを行うには、「use strict」の後にモジュール呼び出しを追加します。 

 'use strict'; /***/ var RandManager = require('./RandManager.js'); /***/


次に、 fetchWallsJSON()



壁紙を受け取る関数を変更する必要があります。 

 fetchWallsJSON() { var url = 'http://unsplash.it/list'; fetch(url) .then( response => response.json() ) .then( jsonData => { /***/ var randomIds = RandManager.uniqueRandomNumbers(NUM_WALLPAPERS, 0, jsonData.length); var walls = []; randomIds.forEach(randomId => { walls.push(jsonData[randomId]); }); this.setState({ isLoading: false, wallsJSON: [].concat(walls) }); /***/ }) .catch( error => console.log('JSON Fetch error : ' + error) ); }


JSONデータを取得するとすぐに、乱数を生成してrandomIds配列に入れます。 次に、乱数を反復処理して、対応するIDを持つ壁紙を壁配列に入れます。

次に、データがロードされ、wallsJSONが壁にあるため、状態変数isLoadingをfalseに更新します。

結果を表示するには、renderResults（）関数を変更します。 

 renderResults() { /***/ var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( . <View> {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.id} </Text> ); })} .</View> ); } /***/ }


renderResults（）関数の最初の行では、ES2015からの構造化を使用しました。 これにより、次のことが可能になりました。 

 var wallsJSON = this.state.wallsJSON, isLoading = this.state.isLoading;


に置き換えます： 

 var {wallsJSON, isLoading} = this.state;


ES2015はクールだと言った。

Viewでは、 map（）を使用して、wallsJSON配列を反復処理します。

レンダリング時に壁紙の配列（またはコレクション）を通過するとき、各要素に一意のキー（id）を渡す必要があります。 したがって、キープロパティが表示されます。 

 <Text key={index}>


エミュレータを更新すると、次のように表示されます。







5つのランダムなIDの壁紙が表示されます。 renderResults（）関数で{wallpaper.id}を{wallpaper.author}に変更すると、次のように表示されます。







さて、APIから特定の数の壁紙（この場合は5）をランダムに抽出する方法を学びました。 五つください！

5. Swiperコンポーネントの追加



このセクションでは、Swiperコンポーネントを追加します。 このコンポーネントを使用すると、コンテナを横向きに反転できる壁紙を表示できます（ Youtube （en））。

サードパーティのReact Nativeコンポーネントをアプリケーションに組み込む方法を学習します。 RNには優れたコミュニティがあり、GitHubにはさまざまなサードパーティコンポーネントの豊富なコレクションがあります。

この目的のために、 react-native-swiperを使用します。

ターミナルのプロジェクトディレクトリに移動し、次のコマンドを入力します。 

 npm install react-native-swiper --save


次の行を追加して、新しいコンポーネントをインポートします。 

 `use strict` /***/ var Swiper = require('react-native-swiper'); /***/


Swiperを試してみましょう。

renderResults（）メソッドに移動し、ViewをSwiperに置き換えます。 その後、renderResults（）メソッドは次のようになります。 

 renderResults() { var {wallsJSON, isLoading} = this.state; if( !isLoading ) { return ( /***/ <Swiper> /***/ {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.author} </Text> ); })} /***/ </Swiper> /***/ ); } }


エミュレーターで実行：







壁紙の作者の名前をリストに表示する代わりに、別の

左右にスクロールできる画面（クール！-約翻訳者）。

次に、いくつかの属性を追加する必要があります。 

 <Swiper /***/ dot.{<View style={{backgroundColor:'rgba(255,255,255,.4)', width: 8, height: 8,borderRadius: 10, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />} activeDot.{<View style={{backgroundColor: '#fff', width: 13, height: 13, borderRadius: 7, marginLeft: 7, marginRight: 7}} />} loop={false} onMomentumScrollEnd={this.onMomentumScrollEnd} /***/ > {wallsJSON.map((wallpaper, index) => { return( <Text key={index}> {wallpaper.author} </Text> ); })} </Swiper>


変更されました：

これで、最初のパートの終わりに来ました。 なんて面白い旅だ！

まとめると



  1. 最初のセクションでは、Xcodeで空のRNプロジェクトを作成する方法を学びました。
  2. 2番目のセクションでは、ES2015と、新しい構文を使用することが望ましい理由について説明し、状態変数の作成方法とAPIからJSONデータを抽出する方法についても学びました。
  3. 3番目のセクションでは、状態変数の値に応じて、アプリケーションの動的レンダリングを調べました。 また、フレックスボックスの配置についても少し知っています。
  4. 4番目のセクションでは、乱数を生成するための独自のモジュールを作成し、それをアプリケーションにインポートする方法を学びました。
  5. 5番目のセクションでは、アプリケーションにサードパーティモジュールをインストールしました。これはNodeのおかげで簡単にできました。


正直に言うと、現時点では、アプリケーションはあまり面白くありません。 知ってるよ。 次のパートでは、著者の名前の代わりに壁紙の画像を追加します。 さらに、ダブルタップハンドラーを追加します（ダブルタップ-正確に翻訳する方法がわかりませんが、理解しているように、指で画面をダブルクリックしますが、ダブルクリックと呼ぶことはできますか？-コメントトランスレーター）。 ライブラリをXcodeにインポートし、Camera Roll（見たところAndroidの「Gallery」の類似物-約翻訳者）のアプリケーションへのアクセスを提供する方法を学習します。 さらに、独自のコンポーネントなどを作成します。 面白いですね？ 次のパートでお会いしましょう。

PS。 猫を挿入する場所を決定する方法？


More articles:


All Articles