反應本機背景圖像

Question

我需要幫助。 我想在下面的背景圖片上添加內容這是我的代碼：

<View style={{flex:1}}>
                <Image
                style={styles.mainContainer}
                source={require('../images/samples/login_bg.png')}>
                <LoginForm/>
                </Image>
            </View>

它告訴我這個錯誤：

Error: The  component cannot contain children. If you want to render content on top of the image, consider using absolute positioning.

Answer 1

來自React Native官方文檔：

來自熟悉網絡的開發人員的常見功能請求是背景圖片。 要處理此用例，您可以使用具有與道具相同的道具的組件，並向其中添加您想在其上分層的任何子級。

在某些情況下，由於實現非常簡單，您可能不想使用。 請參閱的源代碼以獲取更多信息，並在需要時創建自己的自定義組件。

return (
  <ImageBackground source={...}>
    <Text>Inside</Text>
  </ImageBackground>
);

你可以試試

<View style={{flex:1}}>
    <ImageBackground
    style={styles.mainContainer}
    source={require('../images/samples/login_bg.png')}>
       <LoginForm/>
    </ImageBackground>
</View>

Answer 2

正如您提到的，您可以絕對地放置圖像，以使其他所有物品在容器中彎曲。 這樣，您的所有其他組件仍將遵循所有的flex定位樣式，並且圖像將僅在背景中。 注意：您必須先定義圖片，例如

組件按定義順序呈現。

id也是這樣做的方式，就像這樣

<View style={{flex:1}}>
    <Image
       style={styles.mainContainer}
       source={require('../images/samples/login_bg.png')}>
    </Image>
    <LoginForm/>
</View>

和樣式（注意：這會將圖像放置在父視圖的左上方）

mainContainer: {
    position: 'absolute'
    left: 0,
    top: 0
}

然后您可以使用圖像尺寸，例如將width設置為Dimensions.get("window").width會水平填充屏幕。 我相信您必須處理圖像的拉伸，所以在這里看看