ネイティブに反応:画像のresizeModeを含めるように設定すると、画像は左揃えではなく中央に配置されます



React Native Image Setting Resizemode Contain Causes Image Be Centered



要件の背景は、さまざまな幅の画像をコンポーネントに渡し、表示時に画像全体を表示し、画像の位置と高さを一定に保ち、幅を適応させることです。

当初、画像の幅と高さは均一に設定されていました。 h5 imgタグと同じように、左の幅と高さを調整できると思いました



img: { position: 'absolute', top: 6, left: 6, height: 16, width: 60, resizeMode: 'cover', },

広い画像の方が表示しやすいのですが、狭い画像は中央に直接表示されます

グーグルはそれを検索し、含むは設定の調整をサポートしていないと述べました。デフォルトでは、水平および垂直の中央位置になります。したがって、異なる幅の画像に適応する必要がある場合は、画像のアスペクト比に応じて表示される実際の幅と高さを手動で計算し、それを画像コンポーネントに設定する必要があります。



公式の例は次のとおりです。componentDidMountのときに新しい幅と高さを計算し、それを状態で保存します

(個人的には、状態を設定するのは適切ではありませんが、getSizeメソッドはコールバック関数であり、レンダリングでの呼び出しには適していません。これは最初にのみ実行できるようです)

// Official example https://reactnative.cn/docs/0.51/image.html var ImageSizeExample = React.createClass({ getInitialState: function() { return { width: 0, height: 0, } }, componentDidMount: function() { Image.getSize(this.props.source.uri, (width, height) => { this.setState({width, height}) }) }, render: function() { return ( Actual dimensions:{' '} Width: {this.state.width}, Height: {this.state.height} ) }, })