Question

我正在使用React Native 0.54.0-rc.3，这意味着我使用require=()语句加载本地静态图像的版本已经足够了。我已尝试为我的本机应用程序执行此操作，但图像未显示，我不确定原因。

大多数情况下，如果我在网上找到的问题没有帮助，因为他们要么是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肯定知道这样的文件存在（因为输入不存在的路径会导致错误），并且已经为图像做了空间，但它很简单。这是两个图像组件的问题。

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

Answer 1

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

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

Answer 2

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

require()

require（）不显示本地图像React Native

2 个答案: