反應本地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

我嘗試了上面的代碼，錯誤消失了，但是選擇照片后屏幕上什么都沒有顯示。 我也收到警告，提示missing keys for items

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