Bilder, die nicht in ListView angezeigt werden

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); 

Ich versuche, Listview mit Bildern zu erstellen. Versuchen, dieses https://rnplay.org/apps/d3DM6A zu reproduzieren. In meinem Ausgabebild wird nicht angezeigt. Ich referierte React-native failed propType on Image component und änderte die Quelle zu

source = {{uri: this.props.name}} Es funktioniert immer noch nicht.Kindly assist. Ersetzen

Answer 1

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

mit

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