反応ネイティブで画面を回転させた後に幅と高さが変わらない

Question

RNアプリで作業していますが、画面の回転と寸法に関する問題があります。私は、画面が垂直の場合、私は行の3つの画像を表示するギャラリーアプリケーションがあります。私は幅をイメージのサイズに分割して調整します。イメージの数を指定するこの方法は、さまざまなデバイスで一貫性があり、変更可能であると思います。しかし、画面を回転させた後、さらに多くの画像を連続して見ることを期待していましたが、私はそれをしませんでした。私は幅が変わっていないことに気がついたので、5または6の代わりに3つの画像をもう一度見ました。私がこれをやっている方法が正しいか間違っているか分かりません。これに関するどんな提案？また、どのように私は、回転後に私のギャラリーの整列を変更することができますように、幅と高さをdinamically変更することはできますか？ はここに私のコードの一部であり、ここで

...var {height, width} = Dimensions.get('window'); 
var imageSize = 120; 
// number : number of images in a row 
var number = Math.round(width/imageSize); 
console.log(number); 
var CameraRollView = React.createClass({ 

propTypes: propTypes, 

getDefaultProps: function(): Object { 
    return { 
     groupTypes: 'SavedPhotos', 
     batchSize: 5, 
     imagesPerRow: number, 
     assetType: 'Photos', 
     renderImage: function(asset) { 
      //var imageSize = 120; 
      var imageStyle = [styles.image, {width: imageSize, height: imageSize}]; 
      return (
       <TouchableHighlight onPress={ 
        ()=>{ 
         /**fire gallery action selectImage*/ 
         this.selectImage(asset.node.image.uri, this.images); 
        } 
       } key={asset.node.image.uri}> 
        <Image 
         source={asset.node.image} 
         style={imageStyle} 
        /> 
       </TouchableHighlight> 
      ); 
     }, 
    }; 
}, 
... 

重要なものです-imagesPerRow-私は、デバイスを回転させるよう、私は、それは動的なものにしたいです。

Answer 1

画面サイズの変更に対応する必要がある場合は、Dimensionsモジュールを使用しないことをおすすめします。

Viewコンポーネントは、Viewのレイアウトを再計算する必要があるたびに（たとえば、デバイスのローテーション時に）呼び出されるonLayoutというプロパティを提供します。私はあなたのアプリケーションのアーキテクチャについては何も知らないので、私の考えで使うのが最も簡単な方法は、アプリケーションのルートViewにある関数に設定することですあなたがそれを使うならばあなたの流通/還元店に）。

あなたのアプリを介してその情報を渡して、それが適切であると考えて使用することができます。