require() 不显示本地图像 React Native答案

【问题标题】：require() not displaying for local images React Nativerequire() 不显示本地图像 React Native
【发布时间】：2021-08-06 21:59:17
【问题描述】：

我使用的是 React Native 0.54.0-rc.3，这意味着我的版本足够新，可以使用 require=() 语句加载本地静态图像。我已经尝试为我的 react-native 应用程序这样做，但图像没有显示，我不确定为什么。

如果我在网上找到的大多数问题都没有帮助，因为它们要么是 require 语句概念的新问题，要么存在语法错误。还有其他错误似乎与我无关。

这是我的代码的确切外观：

        <Image resizeMethod = "resize" source={require('../../images/ssnit_logo_high_def.png')} style = {{width: 200, height: 200}} />
        <Text style = {styles.title}> About SSNIT </Text>
        <Button title = 'Visit our Website' onPress = {() => this.goToURL("https://www.ssnit.org.gh", "Your device doesn't support internet browsing")}/>


        <View style= {[styles.container,{flexDirection: 'row', height: 60}]} >

            <SocialIcon style = {{margin: 5}}
                light
                type='envelope'
                onPress = {() => this.goToURL('mailto:contactcentre@ssnit.org.gh', "Your device doesn't seem to support email")}
            />

            <SocialIcon
                light
                type='facebook'
                onPress = {() => this.goToURL('https://www.facebook.com/ssnitghana', "Your device doesn't seem to support internet browsing")}
            />

            <SocialIcon
                light
                type='twitter'
                onPress = {() => this.goToURL('https://twitter.com/ssnitghana?lang=en', "Your device doesn't seem to support internert browning")}
            />
        </View>

        <Text style = {styles.paragraph}> Contact Credientials </Text>

        <View style= {[styles.container,{flexDirection: 'row', height: 50}]}>
            <Text style = {styles.subtext}> +233 302 611 622 </Text>
            <Button title = 'Call this number' onPress = {() => this.goToURL("tel:+233302611622", "Your device doesn't support phone calls")}/>
        </View>

        <View style= {[styles.container,{flexDirection: 'row', height: 50}]}>
            <Text style = {styles.subtext}> +233 800 1100 94 </Text>
            <Button title = 'Call this number' onPress = {() => this.goToURL("tel:+233800110094", "Your device doesn't support phone calls")}/>
        </View>

        <Text style = {styles.subtext}> contactcentre@ssnit.org.gh </Text>

        <Text style = {styles.paragraph}> More About Us </Text>

        {this.state.pages.map(info =>
            <TouchableOpacity key = {info.pageName} style ={styles.informationCells} onPress = {() => this.props.navigation.navigate(info.pageName)}>
                <Text style = {[styles.paragraph, {color: "#007AFF", fontWeight: "bold"}]}> {info.title} </Text>
                <Image source={require("../../images/navigation_arrow.png")} style = {{width: 100, height: 100}} resizeMode="contain" />
            </TouchableOpacity>
            )}


      </ScrollView>

React Native 肯定可以知道这样的文件存在（因为输入不存在的路径会导致错误），并且已经为图像腾出了空间，但它是简单的空白。这是两个图像组件的问题。

还有其他人遇到过这样的问题吗？一些帮助将不胜感激。

【问题讨论】：

能否请您在放置图片的位置发布更多代码？还是别的什么？
@anhtu 我已经添加了更多围绕 Image 组件的代码，但我不太确定这会有什么帮助。这个问题似乎完全独立于它周围的布局。
@MainManAndy，你解决过这个问题吗？
我从来没有找到解决方案，只是一种解决方法。在模拟器上测试它以显示图像之前，我必须通过命令行捆绑应用程序。
@MainManAndy，你是什么意思你通过命令行捆绑应用程序？我现在面临同样的问题，可以考虑一种解决方法。让我知道或粘贴您的解决方案，无论它是否是一种解决方法，它可以帮助像我这样的许多其他人，谢谢。

标签： node.js reactjs react-native

【解决方案1】：

所以，我设法找到了解决方法。事实证明，如果您在模拟器上启动应用程序之前通过终端捆绑应用程序，图像将显示在模拟器上。奇怪的是，捆绑也恰好是解决我无法在真正的 Android 设备上运行应用程序的问题的方法，因此这些问题可能是相关的。

无论如何，要学习如何捆绑，look at this StackOverflow answer。信息也可以在this GitHub issue找到。

【讨论】：

【解决方案2】：

我遇到了这样的问题，require() 方法实际上返回了一个对象，其中图片的源在默认值内。如果是同样的问题，你可以试试这个：

<Image 
   resizeMethod="resize"
   source={require('../../images/ssnit_logo_high_def.png').default} 
   style={{width: 200, height: 200}}
/>

【讨论】：