如何在react-native中为不同的api调用显示一个组件。

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      apiResult: null,
      apiType: 'data', // 这里假设apiType为'data'，可以根据实际情况修改
    };
  }

  componentDidMount() {
    // 调用API，获取结果
    // 假设异步调用的结果保存在this.state.apiResult中

    // 模拟异步调用API，并更新状态
    setTimeout(() => {
      this.setState({
        isLoading: false,
        apiResult: 'API调用结果',
      });
    }, 2000);
  }

  render() {
    const { isLoading, apiResult, apiType } = this.state;

    // 根据apiType的不同值来显示不同的组件
    switch (apiType) {
      case 'data':
        if (isLoading) {
          return <ActivityIndicator />;
        } else {
          return (
            <View>
              <Text>Data: {apiResult}</Text>
            </View>
          );
        }
      case 'image':
        if (isLoading) {
          return <ActivityIndicator />;
        } else {
          return (
            <View>
              <Text>Image: {apiResult}</Text>
            </View>
          );
        }
      case 'video':
        if (isLoading) {
          return <ActivityIndicator />;
        } else {
          return (
            <View>
              <Text>Video: {apiResult}</Text>
            </View>
          );
        }
      default:
        return null;
    }
  }
}

export default MyComponent;