React-native:多次重新加载 JS 后图像丢失 [英] React-native: image missing after reloading JS several times

问题描述

不确定是否还有其他人遇到此问题...

Not sure whether anyone else is encountering this issue...

我有一个包含多个图像的简单页面.当我第一次启动应用程序时，一切都完美加载.但是，在我重新加载JS几次后，图像开始随机消失.如果我关闭应用程序并重新开始，它会恢复正常并在我重新加载 JS 时重复该问题.

I have a simple page which contains several images. When I start the app at the first time, everything loads perfectly. However, after I reload JS for several times, the images start to disappear randomly. If I close the app and start over, it will come back to normal and repeat the issue if I reload JS.

造成这种情况的原因是什么?是我遗漏了什么还是只是调试模式的问题?

What's the reason causing this? Is it something I am missing or it is just an issue of the debug mode?

环境为React-native Android，Win10 + Genymotion模拟器

The environment is React-native Android, Win10 + Genymotion emulator

以下是该问题的一些屏幕截图:预期视图:

Here are some screenshots of the issue: The expected view:

有问题的观点之一.背景图片丢失.

One of the problematical view. The background images are missing.

并附上代码以确保完整性:

And attach the code for completeness:

var React = require('react-native');
var {
  StyleSheet,
  PixelRatio,
  View,
  Text,
  Image,
} = React;

var PropTypes = require('ReactPropTypes');
var util = require('../lib/util');

var MainView = React.createClass({
  render: function() {

    return(
        <View style={styles.body1}>
            <Image source={require('./images/bg.png')} style={[styles.stretch, styles.bg]} resizeMode={Image.resizeMode.stretch}>
                <Image source={require('./images/bg_high.png')} style={styles.bg_high}>
                    <Image source={require('./images/starFigure_bg.png')} style={styles.block_high}>
                        <Image source={require('./images/starFigure.png')} />
                    </Image>
                </Image>
            </Image>
        </View>
        )}
  })

var styles = StyleSheet.create({
    main: {
        flex: 1,
    },

    body1: {
        flex: 1,
        alignItems: 'stretch'
    },

    stretch: {
        flex: 1,        
    },

    bg: {
        paddingTop: 160 / PixelRatio.get(),
        paddingLeft: 30 / PixelRatio.get(),
    },

    bg_high: {
        paddingLeft: 7 / PixelRatio.get(),
        paddingTop: 37 / PixelRatio.get(),
        flexDirection : 'row',
    },

    block_high: {
        marginLeft: 20 / PixelRatio.get(),
        paddingLeft: 25 / PixelRatio.get(),
        paddingTop: 25 / PixelRatio.get(),
    },

    btn : {
        height: 30,

    },

    bg_s: {
        width: util.size.width / 2
    },
});

module.exports = MainView

推荐答案

我在使用 Image.resizeMode.stretch 时遇到了这个问题改用封面或包含

i am encountering this issue when i use Image.resizeMode.stretch use cover or contain instead

这可能是由于内存问题.您可以尝试在您的 android manifest 应用程序标签中添加 android:largeHeap="true".

edit: it may due to memory issue. you can try to add android:largeHeap="true" in your android manifest application tag.

这篇关于React-native:多次重新加载 JS 后图像丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！