2

React Native で ScrollView (ページングが有効になっている) を使用して、一連の画像をページングしようとしています。スクロールビューの各ページを画像ビューで埋める方法を知っている人はいますか? これまでのところ、画像スタイルの幅と高さの値をハードコーディングすることしかできませんでした。

これが私がやっているおおよそのことです：

render: function() {
  return (
    var images = [{ url: 'http://url/to/image.jpg' }, { url: 'http://url/to/another-image.jpg'}];
    <ScrollView horizontal={true} pagingEnabled={true} style={styles.myScrollViewStyle}>
      {images.map(image => {
        return (
          <Image source={{uri: image.url}} style={styles.myImageStyle} />
        );
      })}
    </ScrollView>
  );
}

画像が表示される唯一の方法は、スタイルに幅/高さの数値をハードコーディングした場合です。Image を曲げて 1 ページ全体を埋めることができませんでした。

ScrollView スタイル:

scrollView: {
  flex: 1,
  backgroundColor: '#000000',
}

画像のスタイル:

image: {
  width:375,
  height:667,
  flex: 1,
  backgroundColor: 'rgba(0,0,0,0)',
}
4

2 に答える 2

8

画像の寸法を設定するには、次のコードを使用します。

var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');

...

image: {
  width: windowSize.width,
  height: windowSize.height,
  flex: 1,
  backgroundColor: 'rgba(0,0,0,0)',
}
于 2015-05-03T10:50:13.430 に答える