ios - React Native のフルスクリーン画像

Question

React Nativeでサイズ<Image>全体を塗りつぶすにはどうすればよいですか? UIWindowAutolayout を使用している場合は、各エッジに制約を設定しますが、フラックスは非常に異なるパラダイムであり、私は Web の専門家ではありません。手動で幅/高さを設定しないと<Image>何も表示されませんが、スタイルを親要素の幅と高さ、または少なくともウィンドウと同じにする方法を動的に伝えるにはどうすればよいですか?

Answer 1

flexboxを使用する必要があります。完全な例を次に示します。

'use strict';

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Image
} = React;

var TestCmp = React.createClass({
  render: function() {
    return (
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={{uri: 'http://lorempixel.com/200/400/sports/5/'}} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    alignItems: 'stretch'
  },
  image: {
    flex: 1
  }
});

AppRegistry.registerComponent('RCTTest', () => TestCmp);

コンテナー内の項目のフレックスを定義できるようにするコンテナーが必要であることに注意してください。ここで重要なのはalignItems: 'stretch'、imageContainer のコンテンツで使用可能なスペースを埋めることです。