将图像调整为视图 - 反应原生

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的宽度。