將圖像調整爲視圖 - 反應原生

Question

我想知道是否可以調整圖像大小以適合視圖內部。

這就是我現在

<View style={styles.container}> 
    <View style={styles.header}> 
     <Image 
     source={headerImage}  
     /> 

    </View> 
    <Text style={styles.basicText}>text</Text> 
    </View> 

---

const styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     backgroundColor: "#fff" 
     }, 
     header: { 
     height: 200, 
     backgroundColor: 'red' 
     }, 
     background: { 
     width: null, 
     height: null 
     }, 
     image: { 

     } 

我想使圖像配合入頭查看有沒有。

Answer 1

將flex：1添加到圖像中，它將伸展到它的容器上。

image: { 
    flex: 1 
} 

Answer 2

試試下面的風格

<View style={styles.container}> 
    <View style={styles.header}> 
    <Image style={styles.image} 
     source={headerImage}  
    /> 

    </View> 
    <Text style={styles.basicText}>text</Text> 
</View> 

風格

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: "#fff" 
    }, 
    header: { 
    height: 200, 
    backgroundColor: 'red' 
    }, 
    background: { 
    width: null, 
    height: null 
    }, 
    image: { 
    width: 50, 
    height: 50 
    } 
}) 

請參反應的固有圖像屬性

http://facebook.github.io/react-native/releases/0.42/docs/image.html#props

或IMA使用resizeMode ge Props

Answer 3

添加到Moti Azu的答案中，您還需要設置resizeMode。

image: { 
    flex:1, 
    height: null, 
    resizeMode: 'contain', 
    width: null, 
} 

如果它似乎不工作，請確保您的View風格container的寬度。