如何根据API响应React Native动态创建一组视图

import React, { Component } from 'react';
import { View, Text } from 'react-native';

class DynamicViews extends Component {
  state = {
    data: [], // 存储API响应数据
  };

  componentDidMount() {
    // 发送API请求并获取响应数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        this.setState({ data }); // 将响应数据存储到组件的state中
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { data } = this.state;

    // 根据API响应数据动态创建视图组件
    const dynamicViews = data.map(item => (
      <View key={item.id} style={{ backgroundColor: item.color, padding: 10 }}>
        <Text>{item.name}</Text>
      </View>
    ));

    return <View>{dynamicViews}</View>;
  }
}

export default DynamicViews;