0
私は同様の質問に対するすべての回答を読んでおり、どれも問題を解決していません。下のコードスニペットと添付のスクリーンショットでわかるように、私は成功のためにすべてのアドバイスをしましたが運はありません。URIソースからの画像がリアクションネイティブで表示されない
- 私はhttpsでのFlickrから写真を取得しています：//と、有効なAPIキーが
- すべての必要な写真が正常に
- がFlatListに使用（スクリーンショットを参照）検索し、VaRのimadeDataに格納されている（コードを参照してください）写真のIDで3列の項目をリストします。スクリーンショットは3つの列を表示しますが、写真は表示されません。
Photo.js
const url = 'https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + API_KEY + '&[email protected]&format=json&&per_page=20&nojsoncallback=1'; // MSU flickr
class Photos extends Component {
constructor (props) {
super(props);
this.state = {
imageData: [],
isLoading: true,
isError: false,
text: '',
columns: 3,
key: 1,
};
}
getImageData=() => {
return fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
imageData: responseJson.photos.photo
});
})
.catch((error) => {
console.error(error);
});
};
componentDidMount() {
this.getImageData();
}
<FlatList
numColumns={ columns }
data = { imageData }
// extraData={this.state}
renderItem={ ({ item, index }) => {
return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns))/columns }
photoId={ {uri: item.id } } />
}}
keyExtractor={
(item, index) => {
return `${item.id + index}`
// return { index }
}
}
// refreshing={this.state.refreshing}
// onRefresh={this.handleRefresh}
/>
ImageList.js写真無し2
編集と
render() {
const {itemWidth, photoId, onPressItem } = this.props;
return (
<Card>
<TouchableWithoutFeedback
onPress = {() => onPressItem && onPressItem(this.props.photoId)}
onPressIn = {() => this.animateIn()}
onPressOut ={() => this.animateOut()} >
<Animated.View style={{
margin:5,
// backfaceVisibility: 'hidden',
transform: [
{
scale: 1
},{
rotateY: this.state.animateItem.interpolate({
inputRange: [0,1],
outputRange: ['180deg','0deg']
})
}
]
}}>
<Image style={{width: itemWidth, height: 200 }} source={{ photoId }} />
</Animated.View>
</TouchableWithoutFeedback>
</Card>
);
}
Chrome console log with no errors and correct data retrieved
[iOSシミュレータのスクリーン上映グリッドビュー：
最後のレスポンスからのポインタに従って、photoIdの代わりに完全なURLを持つ新しい変数photoURLとしてphotoIdを再作成しました。私は以下を使用します：const photoURL = 'https://farm' + item.farm + '.static.flickr.com /' item.server + '/' + item.id + '_' + item.secret + '_c.jpg ';
const photoURL = 'https://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_c.jpg';
return <ImageList itemWidth={ (ITEM_WIDTH - (10 * columns))/columns }
image={ {uri: photoURL } } />
私はまた、正しい写真がブラウザに各コード化された写真を貼り付けた画像のsrc URIへのparamとして返されていることを確認しました。
しかし、この修正では、アプリの画面に画像が表示されません。私が気まぐれな時に私を助けてください。ありがとう。
photoIdはphoto.jsからプロップとして渡され、そこではFlickrのJSON応答で取得されます。データが返された有効なソースです。コードスニペットをご覧ください。何かが見える場合は、コンポーネント間のデータを修正する必要があります（photo.jsとimageList.js）。それ以外の場合は助言してください。あなたの応答のためのThx。 – Obisi7