反應原生CameraRoll.getPhotos API不呈現結果

Question

嗨我有以下類，我試圖從相機膠捲獲取照片並顯示它。

class CameraRollProject extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    images: [] 
    }; 
    } 

    componentWillMount() { 
    const fetchParams = { 
     first: 25, 
    }; 
    CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError); 
    } 

    storeImages(data) { 
    const assets = data.edges; 
    const images = assets.map((asset) => asset.node.image); 
    this.state.images = images; 
    } 

    logImageError(err) { 
    console.log(err); 
    } 

    render() { 
     return (
     <ScrollView style={styles.container}> 
      <View style={styles.imageGrid}> 
      { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) } 
      </View>   
     </ScrollView> 
    ); 
    } 
}; 

export default CameraRollProject; 

問題是我的渲染功能在我的CameraRoll.getPhotos承諾得到解決之前得到調用。所以我沒有得到任何照片。

爲了解決這個問題，我改變了我的程序分爲以下

render() { 
     return CameraRoll.getPhotos(fetchParams, this.storeImages, this.logImageError) 
     .then(() => { 
      return (
      <ScrollView style={styles.container}> 
       <View style={styles.imageGrid}> 
       { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) } 
       </View>   
      </ScrollView> 
     ); 
     }); 
    } 

然而，這給我下面的錯誤

我可以在上面的情況怎麼辦？如何確保渲染器僅在CameraRoll.getPhotos得到解決後才能使用。

Answer 1

所以我解決了這個問題。我的問題的主要原因是我沒有正確使用CameraRoll.getPhotos作爲承諾。我在函數內部傳遞了不正確的參數。爲了解決這個問題我擺脫了以下功能

storeImages(data) { 
    const assets = data.edges; 
    const images = assets.map((asset) => asset.node.image); 
    this.state.images = images; 
    } 

    logImageError(err) { 
    console.log(err); 
    } 

，讓我CameraRoll.getPhotos像下面

CameraRoll.getPhotos({first: 5}).then(
    (data) =>{ 
    const assets = data.edges 
    const images = assets.map((asset) => asset.node.image); 
     this.setState({ 
      isCameraLoaded: true, 
      images: images 
     }) 
    }, 
    (error) => { 
    console.warn(error); 
    } 
); 

這裏是我完整的代碼從CameraRoll獲取圖片的反應母語以防萬一有興趣的人

class CameraRollProject extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    images: [], 
    isCameraLoaded: false 
    }; 
    } 

    componentWillMount() { 
    CameraRoll.getPhotos({first: 5}).then(
     (data) =>{ 
     const assets = data.edges; 
     const images = assets.map((asset) => asset.node.image); 
     this.setState({ 
      isCameraLoaded: true, 
      images: images 
     }) 
     }, 
     (error) => { 
     console.warn(error); 
     } 
    ); 
    } 

    render() { 
     if (!this.state.isCameraLoaded) { 
     return (
      <View> 
      <Text>Loading ...</Text> 
      </View> 
     ); 
     } 
     return (
     <ScrollView style={styles.container}> 
      <View style={styles.imageGrid}> 
      { this.state.images.map((image) => <Image style={styles.image} source={{ uri: image.uri }} />) } 
      </View>   
     </ScrollView> 
    ); 
    } 
}; 

export default CameraRollProject; 

Answer 2

我認爲你應該使用react-native-image-picker

你有很多的參數來檢索圖片，如你所願

selectPhotoTapped() { 
    const options = { 
     title: 'Choose a picture', 
     cancelButtonTitle: 'Back', 
     takePhotoButtonTitle: 'Take a picture...', 
     chooseFromLibraryButtonTitle: 'Choose from my pictures..', 
     quality: 1, 
     maxWidth: 300, 
     maxHeight: 300, 
     allowsEditing: true, 
     mediaType: 'photo', 
     storageOptions: { 
     skipBackup: true 
     } 
    } 

這是很容易處理比CameraRollProject，該文檔是很好的解釋。因爲你會做什麼它完美適合。 （它適用於iOS和Android）

Answer 3

一種方式做，這將是使用ListView而非Scrollview，因爲你可以利用datasource。這裏是你如何能做到這一點的例子：

constructor(props) { 
    super(props); 

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

    this.loadPhotos(); 
} 

loadPhotos() { 
    const fetchParams = { 
    first: 25, 
    }; 

    CameraRoll.getPhotos(fetchParams).then((data) => { 
    this.state.dataSource.cloneWithRows(data.edges); 
    }).catch((e) => { 
    console.log(e); 
    }); 
} 

這樣，您呈現一個空列表（並有很好的UX加載狀態下），然後一旦獲取完成設置在ListView數據。

如果您想要堅持使用ScrollView和映射的圖像，您還需要某種加載狀態，直到照片加載。希望這可以幫助。