無法獲得背景圖像與React-Native和NativeBase配合使用

我正在嘗試將NativeBase與ReactNative一起使用，並將圖片作爲背景。我一直在Google上搜尋了一段時間，這裏是我的代碼已經出來：無法獲得背景圖像與React-Native和NativeBase配合使用

export default class WelcomeScreen extends Component { 
    render(){ 
     return (
      <Container> 
       <Header> 
        <Button transparent> 
         <Icon name='ios-arrow-back' /> 
        </Button> 
       </Header> 
       <Content> 
        <Image source={require('../images/telula_upclose.jpeg')} style={styles.backgroundImage} /> 
        <Text>Do you ever feel like you dont have a partner</Text> 
       </Content> 
      </Container> 
     ); 
    } 
} 

let styles = StyleSheet.create({ 
    backgroundImage: { 
    flex: 1, 
    backgroundColor:'transparent', 
    justifyContent: 'center', 
    alignItems: 'center', 
    } 
});

的問題是，這綿延的圖像很大，使得它在模擬器面目全非。這裏是一個什麼樣的在模擬器上的圖片相比，實際圖像：

和這裏的實際圖像：

我該如何解決這個問題？

來源

2016-09-27 Philip7899

https://facebook.github.io/react-native/docs/image.html resizeMode PropTypes.oneOf（[」封面'，'包含'，'拉伸'，'重複'，'中心']）可能你正在尋找'包含' –

我是來自NativeBase團隊的Sanket。讓我在我的最後重新創建它。我會保持你在這張貼。 –

您可以使用尺寸爲得到一個尺寸的屏幕和調整大小的圖像：

1-進口尺寸：

import { View, Text, Dimensions } from 'react-native'

在Component獲得硬件尺寸2 - 在窗口對象

const window = Dimensions.get('window');

3-添加了一個尺寸您的圖片

<Image 
    style={{width: window.width, height: window.height}} 
    source={require('../images/telula_upclose.jpeg')} 
/>

警告：您的圖像可能會變形。在您的圖像使用「resizeMode」道具

你可以看看本作的更多信息：documentation for Image and resizeMode

來源

2016-09-27 17:04:45

對於這樣的基本功能來說這似乎很複雜？我必須想象有一種內置的方式來做到這一點？ – Philip7899

您可以改變圖像的高度和寬度讓它進入查看端口，爲此，你可以使用Dimensions API反應原生的。欲瞭解更多詳情，請閱讀react-native doc for Dimensions API。

import { Text, View, Dimensions } from 'react-native'; 

export default class WelcomeScreen extends Component { 
render(){ 
    let {height, width} = Dimensions.get('window'); 
    return (
     <Container> 
      <Header> 
       <Button transparent> 
        <Icon name='ios-arrow-back' /> 
       </Button> 
      </Header> 
      <Content> 
       <Image source={require('../images/telula_upclose.jpeg')} 
        style={[styles.backgroundImage, {height:height, width: width}]} /> 
       <Text>Do you ever feel like you dont have a partner</Text> 
      </Content> 
     </Container> 
    ); 
    } 
} 

let styles = StyleSheet.create({ 
    backgroundImage: { 
    flex: 1, 
    backgroundColor:'transparent', 
    justifyContent: 'center', 
    alignItems: 'center', 
} 
});

如果你想讓你的文字覆蓋背景圖像然後將它包裝在<Image>組件中。

<Image> 
    <View> 
    <Text>Hello!! </Text> 
    </View> 
</Image>

來源

2016-09-27 18:54:12 Ashish

我有這兩種解決方案：

的NativeBase Content組件是React Native ScrollView的包裝。與ScrollView一起使用時的圖像有必要包含圖像的高度和寬度。
如果要排除提及圖像的尺寸，請使用View代替Content。

<View> 
    <Image 
    source={testImage} 
    style={{ flex: 1, height: null, width: null, resizeMode: 'cover' }} 
    /> 
    <Text>Do you ever feel like you dont have a partner</Text> 
</View>

來源

2016-09-28 10:52:08

這裏是做它的成分：

import { 
    Dimensions, 
    Image, 
} from 'react-native' 
import React from 'react' 

const BackgroundImage = (props) => { 
    const window = Dimensions.get('window') 
    const height = props.height || window.height 
    const width = window.width 
    const resizeMode = props.resizeMode || 'cover' // cover 
    return (
    <Image 
     style={[props.styles, {height: height - props.headerSize, width: null, resizeMode: resizeMode }]} 
     opacity={1} 
     source={props.uri ? {uri: props.uri} : props.source} 
    > 
     {props.children} 
    </Image> 
) 
} 

export default BackgroundImage

來源

2016-12-03 14:06:40 imaginair

無法獲得背景圖像與React-Native和NativeBase配合使用

回答

相關問題