javascript - react 原生 setState 数组

Question

我正在使用 ImagePicker 从相册中选择照片，然后将其显示在屏幕上。

this.state = {
pictures:[]
}

takePics(){
ImagePicker.openPicker({
  multiple: true
}).then(response => {

for(var i=0; i < response.length; i++){
  var file = {
      uri : response[i].sourceURL,
      name: response[i].filename,
      type: 'image/png'
  }

  RNS3.put(file, config)
  .then((responseFromS3) => {
    this.setState({pictures:[response[0].sourceURL,
                             response[1].sourceURL,                                                  
                             response[2].sourceURL]})
    })
  }
  })
}

showPhotos(){
<Swiper style={styles.wrapper} showsButtons={this.state.showsButtons} showsPagination={this.state.showsPagination} loop={true}>
<View style={styles.slide1}>
<Image
   style={{width: "100%", height: "100%"}}
   source={{uri:this.state.pictures[0]}}/>
</View>
<View style={styles.slide2}>
   <Image
      style={{width: "100%", height: "100%"}}
      source={{uri:this.state.pictures[1]}}/>
</View>
<View style={styles.slide2}>
       <Image
          style={{width: "100%", height: "100%"}}
          source={{uri:this.state.pictures[2]}}/>
</View>
</Swiper>
}

上面的代码工作正常。然而，问题是我必须预先指定将选择多少张照片。

例如，在代码中我预先分配了 3 张照片，因此如果我选择少于或多于 3 张照片，则代码将不起作用。

由于我不知道用户将选择多少张照片，因此无论用户选择多少张照片，代码都应该有效。

如有任何建议或意见，我们将不胜感激。提前致谢!

这是修改后的代码:

import React, {Component} from 'react'
import { View, Image, FlatList,StyleSheet,TouchableHighlight,Button} from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';

class ImageSwiper extends Component{
  constructor(props){
    super(props)
    this.state = {
      pictures: [],
    }
  }

  takePics = () => {
    ImagePicker.openPicker({multiple: true})
      .then(response => {
        let tempArray = []
        response.forEach((item) => {
          let file = {
            uri: item.sourceURL,
            name: item.filename,
            type: 'image/png'
          }
          tempArray.push(file)
        })
        this.setState({pictures: tempArray})
      })
  }

  takePicHandler(){
    return(
      <View style={{width:375,height:220,backgroundColor:'#F5F5F5'}}>
      <FlatList
           data = {this.state.pictures}
           renderItem = {({item}) =>
             <View style={styles.slide1}>
               <Image
                 style={{width: "100%", height: "100%"}}
                 source={{uri:item.uri}}/>
             </View>
           }
         />
      <View style={{marginTop:-26,justifyContent:'flex-end',alignSelf:'flex-end',marginRight:16}}>
            <TouchableHighlight
              onPress={this.takePics.bind(this)}>
                <Image
                  style={{width:54,height:54}}
                  source={require('./Components/Assets/camera.png')}/>
            </TouchableHighlight>
      </View>
      </View>
    )
    console.log(uri)
  }

  render(){
    return(
      <View>
      {this.takePicHandler()}
      </View>
)
}
}

const styles = StyleSheet.create({
  slide1: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  }
})
export default ImageSwiper

我尝试了上面的代码，错误消失了，但选择照片后屏幕上没有显示任何内容。我还收到警告缺少项目 key

Answer 1

使用 forEach 或 map 函数映射数组并返回数据。此外，使用 FlatList 来显示数据列表。

import { React } from 'react'
import { View, Image, FlatList } from 'react-native'

export default class Example extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      pictures: [],
    }
  }

  takePics = () => {
    ImagePicker.openPicker({multiple: true})
      .then(response => {
        let tempArray = []
        response.forEach((item) => {
          let image = {
            uri: item.path,
            width: item.width,
            height: item.height,
          }
          tempArray.push(image)
        })
        this.setState({pictures: tempArray})
      })
  }

  render(){
    return(
      <View>
        <FlatList 
          data = {this.state.pictures}
          renderItem = {({item}) => 
            <View style={styles.slide1}>
              <Image
                style={{width: "100%", height: "100%"}}
                source={item}/>
            </View>
          }
        />
      </View>
    )}
}