未知のサイズのビューでのリアクションネイティブ画像サイジング

Question

リアクションナイーブは、実行時に画像ディメンションの状態を示すように開発者に提案します。私はこれが良い習慣であることを知っています。私の質問は... <Image>の幅を未知の幅の<View>と同じ幅に変更したいのですか？

たとえば、には<Image>があり、rowDirection: 'row', flex: 0.8にあります。別のデバイスでは、私は異なった画面幅を持っています。デバイスの実際の幅の80％をどのように知ることができますか？

P.S.私はすべてresizeModeを試しましたが、運はありません。

誰でもおかげです！

UPDATE 1

私は

<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}> 
    <Image 
     source={require('../resources/images/side-menu-header.png')} 
     style={{ width: null, height: null, flex: 0.8 }} /> 
    <View style={{ flex: 0.2 }} /> 
</View> 

Result image of above code

しかし、はい、この画像は、現在の幅に0.8に設定されているが、一部の領域がトリミングされたこのスニペットを試してみました。これは私が得たいものではありません。したがって、私は以下のようにcontainにそのresizeModeを設定します。これは私があまりにも期待したものではありません

<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}> 
    <Image 
     resizeMode='contain' 
     source={require('../resources/images/side-menu-header.png')} 
     style={{ width: null, height: null, flex: 0.8 }} /> 
    <View style={{ flex: 0.2 }} /> 
</View> 

Result image of above code

をスニペット！ご覧のように、画像の幅は0.8になり、画像全体が表示されますが、上下のスペースは元の寸法で占められています。 （元の画像のサイズが大きい）

私はいくつかの言葉でこの質問を単純化することができます：私はどのように私のアプリでフル幅の画像を表示するのですか？すべてのデバイスの幅が1080ピクセルではないため、幅を1080に設定することはできません。

ありがとうございます！

Answer 1

使用外形寸法API。

サンプルコード：

const { width, height } = Dimensions.get('window'); 
<Image 
    source={{uri: `${url}`}} 
    style={{ width: width * 0.8, height: height * 0.8 }} 
/> 

* 0.8と高さ* 0.8幅は、それぞれあなたの画面サイズの幅と高さのために80パーセントです。

Answer 2

はそうのように、style小道具にnullのwidthとheightを渡す：私に関する限り

<Image resizeMode='cover' source={{ uri: 'image.png' }} style={{ width: null, height: null, flex: 0.8 }} /> 

Answer 3

、何が必要か、デバイスのサイズを取得するためのAPIです。

寸法を試してみて、このように使用：

let {height, width} = Dimensions.get('window');

画像サイズが動的に作成するため