web-dev-qa-db-ja.com

React Nativeでの画像サイズ変更

反応するネイティブアプリで画像を（画面に合わせて小さく）サイズ変更しようとしていますが、大きすぎるのでできません。

コードは次のとおりです。

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

var styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  flowRight: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC'
  },
  image: {
    width: 200,
    height: 220
  },
});

class SearchPage extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Image source={require('image!rclogo')} style={styles.image}/>

        <Text style={styles.description}>
          Search for RCers!
        </Text>

        <Text style={styles.description}>
          Search
        </Text>

        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            placeholder='Search by Batch, Name, Interest...'/>
          <TouchableHighlight style={styles.button}
              underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>

        <TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Location</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

コンテナタグから取り出しようとしましたが、なぜ適切にレンダリングされないのか理解できないようです。

これはflexbox resizeModeで実行できますか？どうやってやるの？ドキュメントが見つかりません...

javascriptreactjsreact-native
51
rahul2001

画像の自動修正ビュー

image: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
}
73
shixukai

あなたの答えを少し調整します（shixukai）

image: {
    flex: 1,
    width: 50,
    height: 50,
    resizeMode: 'contain' }

Nullに設定すると、画像はまったく表示されません。 50のような特定のサイズに設定します

39
Apit John Ismail

これは私のために働いた：

image: {
    flex: 1,
    aspectRatio: 1.5, 
    resizeMode: 'contain',

  }

aspectRatioは幅/高さだけです（私の画像は幅45ピクセルx高さ30ピクセル）。

23
GenericJam

いくつかの組み合わせを試した後、私はこれを次のように動作させます：

image: {
    width: null,
    resizeMode: 'contain',
    height: 220
}

具体的にはその順序で。これが誰かに役立つことを願っています。 （私はそれが古い質問であることを知っています）

9
Henry Tiquet Leyva

同じ問題にぶつかり、満足できるものが見つかるまで サイズ変更モード を微調整できました。代替アプローチは次のとおりです。

  • 静的リソース のサイズを縮小するには、画像エディターを使用します
  • 画像エディターを使用して、静的リソースに透明な境界線を追加します
  • UXを犠牲にして ネットワークリソース を使用する

画像を微調整する際の品質の低下を防ぐため、さまざまなサイズを簡単に試すことができるように、ベクターグラフィックスを使用することを検討してください。 Inkscapeは無料のツールであり、この目的に適しています。

8
Josh Habdas

これは私のために働いた：

image: {
  flex: 1,
  width: 900,
  height: 900,
  resizeMode: 'contain'
}

幅と高さは、設定したものに制限されるため、必要以上に大きくする必要があります。

5
Jamie Hall

これは私のために働いた、

image: {
    width: 200,
    height:220,
    resizeMode: 'cover'
}

resizeMode: 'contain'を設定することもできます。ネットワークイメージのスタイルを次のように定義しました。

<Image 
   source={{uri:rowData.banner_path}}
   style={{
     width: 80,
     height: 80,
     marginRight: 10,
     marginBottom: 12,
     marginTop: 12}}
/>

フレックスを使用している場合は、親ビューのすべてのコンポーネントで使用します。それ以外の場合は、height: 200, width: 220と冗長です。

4
Анураг Пракаш

Resizemodeを 'cover'または 'contain'で使用し、画像の高さとを設定します。

2
Pramod Mg

私の場合、TypeScriptを使用しているため、「width」と「height」をnullに設定できませんでした。

私が修正した方法は、それらを「100％」に設定することでした：

backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',        
}
0
Felipe Braz

{ flex: 1, resizeMode: 'contain' }は私のために働いた。 aspectRatioは必要ありませんでした

0
Moazzam Khan

反応するネイティブのスケーラブル画像を使用できます

https://www.npmjs.com/package/react-native-scalable-image

  import Image from 'react-native-scalable-image';


     <View style={{width:200,height:200,overflow:'hidden'}}>
        <Image
          width={200} // height will be calculated automatically
          source={{uri: '<image uri>'}}
         />
     </View>
0
Jamal

これを試してください：（詳細については ここをクリック ）

image: { flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }
0
user2676864