javascript - react native 返回图像函数

Question

如何调用第 6 行上的函数 listItems 以在返回中运行？
我尝试使用图像和文本，但都不起作用。

export default class GifPicture extends Component {

render() { 
const gifs = [
    "travel", "wandering", "lost", "best", "earliest-list", "favourites", "writer", "sad", "crying", "death", "learning", "technology", "help", "comedy", "funny", "humor", "humour", "satire", "old", "ancient", "storm", "cloudy", "celebrity", "movies", "blond", "fantasy", "sci-fi", "science-fiction", "sf", "classics", "business", "career", "creativity", "fitness", "happiness", "health", "love", "non-fiction", "nonfiction", "productivity", "relationships", "romance", "self-help", "success", "wellness", "baseball", "sports", "book club", "historical", "literary", "summer", "sunny", "clear", "warm", "autumn", "books", "coffee", "creep", "creepy", "dark", "fall", "fireplace", "freaky", "halloween", "leaves", "november", "october", "pumpkin", "rain", "rainy", "reading", "scary", "september", "spooky", "sweater", "tea", "thanksgiving", "intrigue", "mystery", "thriller", "fiction", "seasons", "setting", "weather", "winter", "cold", "warmup"
];
const listItems = gifs.map((gif) => {
    axios
    .get("https://api.giphy.com/v1/gifs/random?api_key=#####&tag=cats", {params: {q: {gif}}})
    .then( (results) => { 
        var imageUrl = response.data.image_original_url;

        <Image source = {imageUrl} />
        console.warn(results.data.image_original_url); 
    })
    .catch(err => console.log(err));   
})  
    return ( 
        <View>
            <Image source= {listItems}/>
    </View>
    );
}}

Answer 1

如果您不进行异步 axios 调用，这将是一个非常简单的解决方案。

当您依赖应用根据 API 调用呈现内容时，通常的做法是在组件安装时使用名为 componentDidUpdate 的组件生命周期触发该 API 调用一次并保存结果状态中的 API 调用。

最初，您的组件将呈现一个空屏幕。

一旦所有图像下载完毕，您就可以通过调用this.setState()来更新组件的状态，如下例所示:

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

    componentDidMount() {
        this.fetchImageUrls()
    }

    fetchImageUrls = () => {
        const gifs = [
            "travel", "wandering", "lost", "best", "earliest-list", "favourites", "writer", "sad", "crying", "death", "learning", "technology", "help", "comedy", "funny", "humor", "humour", "satire", "old", "ancient", "storm", "cloudy", "celebrity", "movies", "blond", "fantasy", "sci-fi", "science-fiction", "sf", "classics", "business", "career", "creativity", "fitness", "happiness", "health", "love", "non-fiction", "nonfiction", "productivity", "relationships", "romance", "self-help", "success", "wellness", "baseball", "sports", "book club", "historical", "literary", "summer", "sunny", "clear", "warm", "autumn", "books", "coffee", "creep", "creepy", "dark", "fall", "fireplace", "freaky", "halloween", "leaves", "november", "october", "pumpkin", "rain", "rainy", "reading", "scary", "september", "spooky", "sweater", "tea", "thanksgiving", "intrigue", "mystery", "thriller", "fiction", "seasons", "setting", "weather", "winter", "cold", "warmup"
        ];
        Promise.all(
            gifs.map(gif => {
                return axios
                    .get(
                        'https://api.giphy.com/v1/gifs/random?api_key=#####&tag=cats',
                        { params: { q: { gif } } }
                    )
                    .then(response => {
                        var imageUrl = response.data.image_original_url
                        return imageUrl
                    })
                    .catch(err => console.log(err))
            })
        )
            .then(arrayOfImageUrls => {
                this.setState({ imageUrls: arrayOfImageUrls })
            })
            .catch(err => {
                console.error('Any one of the axios calls failed...', err)
            })
    }

    render() {
        const { imageUrls } = this.state
        return (
            <View>
                {imageUrls.map((imageUrl, index) => (
                    <Image key={index} source={imageUrl} />
                ))}
            </View>
        )
    }
}

更新组件的状态将触发重新渲染，从而导致显示图像。

有关Component生命周期方法的更多信息:https://reactjs.org/docs/react-component.html

在此处阅读有关在 React 上获取数据的信息:https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/