반응 기본 배경 이미지

Question

도움이 필요합니다. 당신이 언급 한 바와 같이

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

Answer 1

당신은, 당신의 이미지를 절대 LY 배치 할 수 있습니다 : 그것은 저에게이 오류가 표시

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

: 나는 아래 배경 이미지 이 콘텐츠를 추가 할 것은 내 코드입니다 다른 모든 항목을 컨테이너 내에서 구부릴 수 있습니다. 이와 같이하면 다른 모든 구성 요소가 여전히 모든 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으로 설정하면 화면이 수평으로 채워집니다. 나는 당신이 이미지의 스트레칭을 처리하기 위해, 그래서 기본 공식 문서 반응에서 살펴에게 here

Answer 2

이있을 것이다 생각 :

웹에 익숙한 개발자의 일반적인 기능 요청은 배경 이미지입니다 . 이 사용 사례를 처리하려면 동일한 소품을 가진 구성 요소를 사용하고 하위 구성 요소를 레이어 위에 추가하려면 하위 레이어를 추가하십시오.

구현이 매우 간단하므로 어떤 경우에는 사용하고 싶지 않을 수도 있습니다. 자세한 정보는 소스 코드 을 참조하고 이 필요할 때 나만의 맞춤 구성 요소를 만드십시오.

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>