Question

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

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

造成这种情况的原因是什么？这是我缺少的东西还是调试模式的问题？

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

以下是该问题的一些截图：预期的观点：

其中一个有问题的观点。缺少背景图像。

并附上完整性代码：

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

Answer 1

当我使用Image.resizeMode.stretch时遇到此问题使用封面或包含

编辑：它可能是由于记忆问题。你可以尝试添加android：largeHeap =＆＃34; true＆＃34;在您的Android清单应用程序标记中。

React-native：重新加载JS几次后图像丢失

1 个答案: