リアクト - ネイティブ：私<image></image>

Question

で許可されませ子どもたちは、私は私のコードで問題を有していませんよ。

私は私のイメージタグの間に何かを置くことは許されないんだけど、私は自分のアプリケーションの残りの部分にロードするためにする必要があります。

class BackgroundImage extends Component { 
render() { 
    return(
     <Image source={require('./img/Sunny.jpg')} 
       style={styles.backgroundImage}> 
        {this.props.children} 
     </Image> 
    ) 
} 
} 

これは私が使用しているコードですが、別のクラスメイトにとってはうまくいきます。 私は彼のコードで特別なものは見つけられません。悲しいことです。ここで

は誤りです： image error screen。

編集：それは私が私の全体のコードの前後にタグをつけ、今立っています。 ロードされるのは背景画像だけですが、他には何もありません。私はちょうど私のアプリケーションに背景を追加しようとしている

は、それは私のhaaardの時間を与えています。どんな助けでも非常に感謝されます、ありがとう！

EDIT：私の恐ろしいコードの

エクストラ写真：

Start of render

End of render

CSS

これは私が今持っているものです。私のコードでは、あなたがイメージに子供を渡すことが許可されていないので、あなたは、あなたのイメージの周囲に表示を入れて、それは絶対に配置する必要がAttempt with Tim's code (failed)

Answer 1

のみ<Text>と<View>とthis.state.x

The code

がありますタグ。

import React, { Component } from 'react'; 
import { Text } from 'react-native'; 
import BackgroundImage from './BackgroudImage'; 

class MainApp extends Component { 

render() { 
    return (
     <BackgroundImage> 
      <Text style={{ backgroundColor: 'transparent', fontSize: 30 }}> Test </Text> 
     </BackgroundImage> 
    ); 
    } 
} 
export default MainApp; 

そしてここにあなたの背景画像コンポーネント：

import React, { Component } from 'react'; 
import { View, Image } from 'react-native'; 
import background from '../../img/test.jpg'; 

class BackgroundImage extends Component { 
    render() { 
     return (
      <View style={{ flex: 1, position: 'relative' }}> 
      {this.props.children} 
      <Image 
      source={background} 
      style={{ zIndex: -1, position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, resizeMode: 'cover' }} 
      /> 
      </View> 
     ); 
    } 
} 
export default BackgroundImage; 

そして、ここでの結果：

は

編集：例