反应本机图像 URI 未显示

Posted 2023-03-15

【中文标题】反应本机图像 URI 未显示

【英文标题】：React Native Image URI Not Showing

【发布时间】：2015-12-14 11:44:30

【问题描述】：

在 ListView 中呈现一组行组件时，我的 uri 图像似乎根本没有显示。我已将 Image 包含在反应模块中。我的自定义组件如下：

var url = rowData.mediaGroups[0].contents[0].url; 
            if (url.indexOf('w=150') > -1)
            
                url.replace("w=150", "w=500");
            
            return <ArticlePreview
                category=rowData.categories[0]
                key=sectionID
                heartText='2.9k'
                categoryPress=this.onCategoryDetailsPress
                selected=false
                source= uri: url 
                text=rowData.title.toLowerCase().replace('&nbsp;','')
                onPress=this.onArticleDetailsPress />

该组件具有多个属性，并在我的整个应用程序中使用（并与链接图像一起使用）。但由于某种原因，该组件刚刚停止在应用程序中为 uri 图像工作。不知道该怎么办。这是组件本身的代码：

//component for article preview touchable image
/* will require the following
- rss feed and api
- user's keyword interests from parse In home.js
- parse db needs to be augmented to include what they heart
- parse db needs to be augmented to include what they press on (like google news)
*/
var React = require('react-native');
var 
  View, 
  StyleSheet, 
  Text, 
  Image, 
  TouchableHighlight, 
 = React;

//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
var ImageButton = require('../../common/imageButton');
var KeywordBox = require('../../authentication/onboarding/keyword-box');

//additional libraries

module.exports = React.createClass(
  //onPress function that triggers when button pressed
  //this.props.text is property that can be dynamically filled within button 
  /* following props:
    - source=this.props.source
    - onPress=this.props.onPress
    - this.props.text
    - this.props.heartText
    - key=this.props.key 
    - text=this.props.category 
    - this.props.selected
  */
  render: function() 
    return (
      <TouchableHighlight 
        underlayColor='transparent'
        onPress=this.props.onPress >
          <Image source=this.props.source style=[styles.articlePreview, this.border('red')]>
                  <View style=[styles.container, this.border('organge')]>
                      <View style=[styles.header, this.border('blue')]>
                          <Text style=[styles.previewText]>this.props.text</Text>
                      </View>
                      <View style=[styles.footer, this.border('white')]>
                        <View style=[styles.heartRow, this.border('black')]>
                          <ImageButton
                              style=[styles.heartBtn, , this.border('red')]
                              resizeMode='contain'
                              onPress=this.onHeartPress
                              source=require('../../img/heart_btn.png') />
                          <Text style=[styles.heartText]>this.props.heartText favorites</Text>
                        </View>
                          <KeywordBox 
                              style=[styles.category, this.border('blue')]
                              key=this.props.key 
                              text=this.props.category 
                              onPress=this.props.categoryPress
                              selected=this.props.selected />
                      </View>
                  </View>
          </Image>
      </TouchableHighlight>
    );
  , 
  onHeartPress: function() 
    //will move this function to a general module
  , 
  border: function(color) 
      return 
        //borderColor: color, 
        //borderWidth: 4,
       
   ,
);

var styles = StyleSheet.create(
  heartText: 
    color: 'white', 
    fontSize: 12, 
    fontWeight: 'bold',
    alignSelf: 'center', 
    marginLeft: 5, 
  , 
  heartRow: 
    flexDirection: 'row', 
    justifyContent: 'space-around', 
    alignSelf: 'center', 
    justifyContent: 'center', 
  , 
  heartBtn: 
    height: (92/97)*(window.width/13), 
    width: window.width/13, 
    alignSelf:'center', 
  , 
  category: 
    fontFamily: 'Bebas Neue', 
    fontSize: 10,
    fontWeight: 'bold'
  , 
  header: 
    flex: 3, 
    alignItems: 'center', 
    justifyContent: 'space-around', 
    marginTop: window.height/30,
  , 
  footer: 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'space-between', 
    alignItems: 'center', 
    margin: window.height/50,
  , 
  container: 
    flex: 1, 
    backgroundColor: 'black', 
    opacity: 0.6, 
  , 
  articlePreview: 
    flex: 1, 
    height: window.height/3.2, 
    width: window.width, 
    flexDirection: 'column'
  , 
  previewText: 
    fontFamily: 'Bebas Neue', 
    fontSize: 23,
    color: 'white', 
    alignSelf: 'center', 
    textAlign: 'center', 
    margin: 5, 
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0
  , 

);

用户界面目前看起来像这样，没有图像（黑色背景）：

【问题讨论】：

你能给我们this.props.source的结果吗？此外，您是否有理由将其他组件包装在图像组件中？谢谢。

嘿@NaderDabit，我在我的自定义组件中嵌套了组件，这样我就可以在图像顶部获取文本 - 这是为用户制作文章预览 - 但问题在于我是当我改变图像的不透明度（使其变暗以便文本更容易看到）时，它会改变文本本身的不透明度。我尝试使用 bretvante 制作的 react-native-overlay 组件，但效果不是很好（存在定位问题）。您对调和不透明度问题有什么建议吗？谢谢！

【参考方案1】：

检查了我的 rss 提要 - 有些是不可靠的，导致图像显示方式混乱