2016-10-26 8 views
0

React Nativeを使用して水平に隣接して配置したい2つの画像があります。私は、各画像が他の画像と比べて消費する画面の割合を制御したいと考えています。これらの画像は一緒に使用可能な水平画面スペースよりも大きくなります。私は元の寸法を維持し、単にそれらを画面の端で切り取るようにしたいと思います。私は様々なアプローチを試してみたReactネイティブの大きめの画像の位置付け

enter image description here

:ここ

はトリミングされて、私は画面を越えて延びている画像の追加部品で、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> 

これが生成する:2枚の画像の当接を実現enter image description here

を、オーバー制御を可能にします各画像が他の画像と比較して消費する画面の割合を計算し、その寸法を維持し、画面の端でそれらを切り取ります。ただし、両方の画像は画面の中央に配置され、各画像で消費される画面の幅は、フレックス(相対)ではなく値として明示的に設定する必要があります。

ソリューション

次は、所望の結果を得るように見えますが、私はそれが最善の解決策だかはわからない:

<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を:お互いに次の画像を整列する(画像をラップビュー上)「行」

答えて

0

あなたはこのを試してみました。 flexDirectionを実行するだけです: '行'はアイテムを水平に整列させます。画像が全画面表示にならないように幅/高さを調整する必要があります。

私はそれが

EDITを行く方法を知ってみましょう:代わりに、幅を設定するので、多分あなたは、左、左50%に左の画像を移動する権利を使用することができますし、右の画像は右の50%を移動するには?

+0

これを私が試したことの1つと結果として更新しました。 – Sivart

関連する問題