图像未显示在 ListView 中

Question

 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 并将来源更改为

source={{uri: this.props.name}} 还是不行。请帮忙。

Answer 1

替换

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

与

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