反應本機圖像全寬不與'alignItems：'center'`一起使用

嗨，我正在使用react-native項目。我試圖設置圖像的寬度有全屏的寬度。基於各種計算器的答案，this github issue我寫了下面的代碼反應本機圖像全寬不與'alignItems：'center'`一起使用

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'阻止渲染圖片？

來源

2016-09-22 Muhammad Raihan Muhaimin

alignItems: 'center'沒有預定width/height，所以您必須在畫布樣式規則指定width/height，或他同樣的規則把alignSelf: 'stretch'。

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

來源

2016-09-22 11:20:43

這完全爲我工作，雖然我刪除了寬度/高度爲空，因爲它阻止圖像顯示在所有（react-native v0.40） –

你可以得到的寬度和使用Dimensions窗口的高度，見下面的例子

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

來源

2016-09-22 10:30:31

反應本機圖像全寬不與'alignItems：'center'`一起使用

回答

相關問題