如何在React Native中使用道具列表?

时间:2016-10-02 04:00:50

标签: image list react-native

我想获取一个图像列表并将其发送到另一个文件,该文件将使用列表列出图像。

所以在我的主文件中我有这个:

render(){
return(
  <ScrollView>

  <View style={{flex: 1}}>
     <View>
      <ImageList images={require('./images/example1.jpg'), require('./images/example2.jpg')}/>
     </View>
  </View>

  </ScrollView>
);

}

然后在另一个文件中我有这个:

constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
  dataSource: ds.cloneWithRows([
    props.images
  ])
};

 }

render() {
return (
  <View>
    <ListView
      contentContainerStyle={styles.list}
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Image source={rowData} style={styles.imageSize}/>}
    />
  </View>
);

}

问题是只显示其中一个图像。我想要显示所有图像。

我尝试将其转换为数组:

  <ImageList images={[require('./images/example1.jpg'), require('./images/example2.jpg')]}/>

但我得到一个错误,其中说:

JSON value '1' of type NSNumber cannot be converted to an image. Did you forget to call resolveAssetSource() on the JS side? 

根据@Siou建议做出改变。

this.state = {dataSource: ds.cloneWithRows(props.images)};

但我收到了一个错误:

undefined is not an object (evaluating 'Object.keys(dataBlob[sectionID])')

1 个答案:

答案 0 :(得分:0)

如错误所示,您需要解决资产来源:

import {Image} from 'react-native'
Image.resolveAssetSource(asset)

对于数组:

images={images.map(image => Image.resolveAssetSource(image))}