图像不在ListView中显示

var testData=[{"name":"require('./Images/X.jpg')"},{"name":"require('./Images/Y.jpg')"}]; 

class SampleRow extends React.Component{ 
render() { 
    return (
    <View style={styles.wrapper}> 
    <View> 
      <Image style={styles.Img} source={this.props.name}></Image> 
      <Text style={styles.text}>Hello</Text> 
    </View> 
    </View> 
); 
} 
} 

class ListViewRows extends React.Component{ 
constructor() { super(); const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { dataSource: ds.cloneWithRows(testData), }; } 


renderRow(rowData) { 
return <SampleRow name={rowData.name} style={styles.row} /> 
} 

render() { 
    return (
    <ListView 
    ref="listView" 
    style={styles.container} 
    dataSource={this.state.dataSource} 
    renderRow={this.renderRow} 
    /> 
); 
} 
} 


var styles = StyleSheet.create({ 
container: { 
flex: 1, 
backgroundColor: '#F5FCFF', 
padding: 20 
}, 
wrapper: { 
flexDirection: 'row', 
justifyContent: 'space-between', 
paddingRight: 10, 
borderBottomWidth: 1, 
borderBottomColor: '#e9e9e9', 
marginTop: 20 
}, 
text: { 
fontSize: 24, 
fontWeight: "100", 
color: 'black', 
    },Img:{ 
width:200,height:200,resizeMode: 'contain' 
    }, 
    }); 

    AppRegistry.registerComponent('List',() => ListViewRows);

我想创建带图像的列表视图。试图复制此https://rnplay.org/apps/d3DM6A。在我的输出图像不显示。我推荐React-native failed propType on Image component并将源代码更改为图像不在ListView中显示

source = {{uri：this.props.name}}它仍然不起作用。善意帮助。

来源

2016-11-01 Lambo

更换

var testData=[{"name":"require('./Images/X.jpg')"},{"name":"require('./Images/Y.jpg')"}];

与

var testData=[{"name":require('./Images/X.jpg')},{"name":require('./Images/Y.jpg')}];

来源

2016-11-01 09:58:21 Jickson

@ Jickson它的工作原理。我以前也尝试过，主要问题是我的Geny Motion显示前几次输出，即使我改变了代码，所以我认为代码中有一些错误。我重新启动了Geny Motion几次，它的工作原理。我有一个问题，我的应用程序涉及很多静态图像，在我开发它时变得越来越慢。导航特别困难。如何克服这个问题 – Lambo

对不起，很难找到原因，没有看到代码..用我们可以用来重新创建问题的部分代码创建一个问题。希望我们能够帮助你。 – Jickson

图像文件的大小会影响应用程序的性能。我将图像的尺寸减小到更低，现在可以正常工作。 – Lambo

图像不在ListView中显示

回答

相关问题