バックグラウンドイメージが数回前後に移動した後に消えます。ネイティブに反応します。

Question

私は、背景イメージとその上にいくつかのアイコンが表示された簡単なビューを作成しました。アイコンをクリックすると、別のページに移動します。それは正常に動作しています。問題は、他のページに移動してホームページに戻って、これを7〜8回実行すると、すべての画面から背景イメージが消えるだけです。以下は、その画面に移動するたびに、それが再描画呼び出して、ホーム画面やスクリーンショット

<Image 
    source={require('../images/background.jpg')} 
    style={{ 
    justifyContent:'center',              
    resizeMode: "stretch", 
    height: height, 
    width: width, 
    alignItems: "center" 
    }} > 
    <StatusBar 
    backgroundColor="#4e0870" 
    barStyle="light-content" 

/> 
<Image style={{ height: 125, width: 125 }} source={require('../images/guru_logo.png')} /> 

<View style={{ 
    marginTop: 30, 
    flexDirection: 'row' 
}}> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("LiveTV") 
    } 
    } 
    > 
    <Image 
     source={require('../images/live.png')} 
     style={{ 
     resizeMode: "stretch", 
     height: 75, 
     width: 75 
     }} /></TouchableOpacity> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("VideoPage") 
    }}> 

    <Image 
     source={require('../images/youtube.png')} 
     style={{ 
     marginTop: 5, 

     resizeMode: "stretch", 
     marginLeft: 100, 
     height: 75, 
     width: 75 
     }} /> 
    </TouchableOpacity> 
</View> 
<View 

    style={{ 

    flexDirection: 'row', 
    marginTop: 20 
    }}> 
    <Text 
    style={{ 
     marginLeft: -5, 
     fontSize: 20, 
     color: "#FFF" 
    }}>Live Tv</Text> 
    <Text 
    style={{ 
     fontSize: 20, 
     color: "#FFF", 
     marginLeft: 125 
    }}>Video</Text> 
</View> 
<View 
    style={{ 

    flexDirection: 'row', 
    marginTop: 20 
    }}> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("FacebookPage") 
    }}> 
    <Image 
     source={require('../images/facebook-logo.png')} 
     style={{ 
     resizeMode: "stretch", 
     height: 75, 
     width: 75 
     }} /></TouchableOpacity> 
    <TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("AudioPage") 
    }}> 
    <Image 
     source={require('../images/icon.png')} 
     style={{ 
     resizeMode: "stretch", 
     marginLeft: 100, 
     height: 75, 
     width: 75 
     }} /></TouchableOpacity> 
</View> 
<View 
    style={{ 

    flexDirection: 'row', 
    marginTop: 20 
    }}> 
    <Text 
    style={{ 
     marginLeft: -20, 
     fontSize: 20, 
     color: "#FFF" 
    }}>Facebook</Text> 

    <Text 
    style={{ 
     fontSize: 20, 
     color: "#FFF", 
     marginLeft: 110 
    }}>Audio</Text> 
</View> 

<TouchableOpacity activeOpacity={.5} onPress={() => { 
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButton); 
    navigate("ContactPage") 
}}> 
    <Image 
    source={require('../images/contact.png')} 
    style={{ 


     marginTop: 20, 
     resizeMode: "stretch", 
     height: 75, 
     width: 75 
    }} /></TouchableOpacity> 
<Text style={{ 
    fontSize: 20, 
    color: "#FFF" 
}}>Contact Us</Text> 
</Image>   

Answer 1

のコードがあります。私は過去に、画像ソースを変数として定義し、それをsource = {HERE}セクションで単に参照することができたことを知りました。私はいくつかのサンプルコードを以下に提供しました。これは過去にこの問題を修正しました。それがどうなるか教えてください。あなたのImageコンポーネントで

var images = { 
    live: {img: require('../images/live.png')}, 
    guru: {img: require('../images/guru_logo.png')}, 
    background: {img: require('../images/background.jpg')}, 
    //and so on 
} 

class SelectionScreen extends Component { 
    //all your other code 

、その後、私はそれがこの反応ネイティブ問題に関連することができると思い

<Image source = {images[background].img}.../> 

Answer 2

：https://github.com/facebook/react-native/issues/13600

私がしようとします：

• ラン別の携帯電話/エミュレータ上のアプリに依存するかどうかを確認する de副仕様（RAMなど）アプリがAndroidとiOSの両方に対応している場合は、両方のプラットフォームで同じ動作になっているかどうかを確認します。
• イメージを一時的に他のより小さい/大きなイメージに置き換えて、何らかの問題が変わったかどうかを確認します。
• 必要に応じてネイティブにアップグレードし、Imageの代わりに背景イメージにBackgroundImageコンポーネントを使用します。