React Nativeを使用して水平に隣接して配置したい2つの画像があります。私は、各画像が他の画像と比べて消費する画面の割合を制御したいと考えています。これらの画像は一緒に使用可能な水平画面スペースよりも大きくなります。私は元の寸法を維持し、単にそれらを画面の端で切り取るようにしたいと思います。私は様々なアプローチを試してみたReactネイティブの大きめの画像の位置付け
:ここ
はトリミングされて、私は画面を越えて延びている画像の追加部品で、2枚の画像を表示させたいかを簡単にモックアップですしかし、何も動作していないようです。どんなアイデアも高く評価されます。次のように https://stackoverflow.com/users/7016280/jhackによって示唆されEDIT 一つのアプローチは、次のとおりです
<View style={{flex: 1, flexDirection: 'row'}}>
<Image style={{width:200}}
source={require('./image.jpg')}
/>
<Image style={{width:175}}
source={require('./image.jpg')}
/>
</View>
を、オーバー制御を可能にします各画像が他の画像と比較して消費する画面の割合を計算し、その寸法を維持し、画面の端でそれらを切り取ります。ただし、両方の画像は画面の中央に配置され、各画像で消費される画面の幅は、フレックス(相対)ではなく値として明示的に設定する必要があります。
ソリューション
次は、所望の結果を得るように見えますが、私はそれが最善の解決策だかはわからない:
<View style={{flex: 1, flexDirection: 'row'}}>
<Image style={{width:1000, transform: [{translateX: -700}]}}
source={require('./image.jpg')} />
<Image style={{width:1000, transform: [{translateX: -700}]}}
source={require('./image.jpg')} />
</View>
画像の例では1000年広く、 "translateX:-700"とすると左の画像は300、右の画像は残りの画像となります。画像の幅/高さを設定する
をしてフレックスを使用します:1、flexDirectionを:お互いに次の画像を整列する(画像をラップビュー上)「行」
これを私が試したことの1つと結果として更新しました。 – Sivart