React Native 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をPromiseとして正しく使用していないことでした。私は関数内で不正なパラメータを渡していました。私は、次のような機能

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({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.getPhotosを作りましたこの問題を解決するには、私の完全なコードは反応し、ネイティブ念のためにに、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

私はあなたがあなたが

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より扱いがはるかに簡単です、そしてドキュメントが非常によく説明している画像を取得するための多くのパラメータを持っているreact-native-image-picker

を使うべきだと思います。あなたがすることは完全に合っています。 （iOSとAndroidで動作します）

Answer 3

一つの方法は、あなたがを利用することができますので、ListViewではなくScrollviewを使用することです。

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とマップされた画像を貼り付ける場合は、写真が読み込まれるまで何らかの種類のローディング状態が必要です。お役に立てれば。