图像仅在直接需要时加载，并在需要时通过另一个模块不一致

Question

什么是一致的

[编辑：无论出于何种原因不再一致]

import React from 'react';
import {Image} from 'react-native';
import STYLE from './styles';

export default class OwnMarker extends React.Component {
    render() {
        return(
            <Image 
                style={STYLE.marker} 
                source={require('../../../../resources/images/marker.png')}
                resizeMethod="resize"
            />
        );
   }
}

这将产生一致的解决方案。

什么是不一致的

import React from 'react';
import {Image} from 'react-native';
import STYLE from './styles';

//Note import
import Images from '../../../../resources/Images';

export default class OwnMarker extends React.Component {
    render() {
        return(
            <Image 
                style={STYLE.marker} 
                source={Images.own_marker}
                resizeMethod="resize"
            />
        );
   }
}

导入的对象如下所示：

//Images.js
module.exports = {
    own_marker: require('./images/marker.png'),
}

这会导致解决方案不一致

有时这些图片会加载，有时候它们不会。它可能只渲染3个标记的图像，没有它们，所有标记，7个或它们，或者没有任何标记加载所有标记之间的其他可能性。

如何从import语句中完成此工作？为什么它目前不一致？

Answer 1

Javascript不一定强制对同一范围内的语句（“块”）执行代码顺序，因此在获取所有图像之前，您可能会遇到导出语句正在加载的问题。

一种可能的解决方案是在类本身中使用生命周期钩子，例如： onComponentWillMount（）{从'../../../../ resources / Images'}导入图片

我遇到了不允许这样做的私有构建，所以在导出类本身之前可以强制加载动态数据的任何东西都应该可以工作。

Answer 2

晚上用这样的解决方案很难入睡，但这是唯一一个对我有用的方法。

import React from 'react';
import {Image} from 'react-native';
import STYLE from './styles';

import Images from '../../../../resources/Images';

export default class OwnMarker extends React.Component {
    constructor(props){
        this.state = {
            // HACK
            initialRender: true
        }
    }

    render() {
        return(
            <Image 
                style={STYLE.marker} 
                source={Images.own_marker}
                resizeMethod="resize"
                // HACK
                onLayout={() => this.setState({ initialRender: false })}
                key={`${this.state.initialRender}`}
            />
        );
    }
}