ネイティブイメージの全幅が `alignItems： 'center'`で動作しません。

Question

こんにちは私は、反応ネイティブプロジェクトで作業しています。私は画像の幅を画面の全幅に設定しようとしています。様々なstackoverflowの答えとthis github issueに基づいて、私は次のコードが

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    backgroundColor: '#F5FCFF', 
    alignSelf: 'stretch' 
    }, 
    canvas: { 
    flex: 1, 
    width: null, 
    height: null 
    }, 
}); 

return (
    <View style={styles.container}> 
     <Image 
     resizeMode="cover" 
     source={pic} 
     style={styles.canvas} /> 
    </View>   
); 

、私はスタイルルールコンテナに次のルールalignItems: 'center'を追加した瞬間を書きました。写真はそれ以上レンダリングされません。私はなぜalignItems: 'center'レンダリングから写真を防ぐのだろうか？

Answer 1

alignItems: 'center'が所定width/heightを持っていないので、あなたはキャンバスのスタイルルールにwidth/heightを指定するか、しなければならないのいずれか、次の例を参照してください、Dimensionsを使用して、幅とウィンドウの高さを得ることができますint彼は同じルールを入れますalignSelf: 'stretch'。それはすべて（反応ネイティブv0.40）で表示からイメージを防止するように、私は、ヌルの幅/高さを除去するが

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    backgroundColor: '#F5FCFF', 
    alignSelf: 'stretch', 
    }, 
    canvas: { 
    flex: 1, 
    alignSelf: 'stretch', 
    width: null, 
    height: null 
    }, 
}); 

Answer 2

あなたは

import {Dimensions} from 'react-native' 
const { width, height } = Dimensions.get('window')