本篇文章参考两位大佬

https://blog.csdn.net/qq_74796274/article/details/155525146?spm=1001.2014.3001.5501

https://blog.csdn.net/qiaomu8559968/article/details/155497422?spm=1001.2014.3001.5502

  在本次参与的开源鸿蒙跨平台开发学习活动中，我选择了基于 React Native 开发 HarmonyOS 应用的技术路线，并结合学习过程整理成一系列实践笔记，完整记录从环境搭建到功能开发的各个环节。本文是该系列的第七篇，承接前几篇的内容，我们已经完成了 React Native 在 HarmonyOS 平台上的基础环境配置以及底部 TabBar 的实现。本篇将在此基础上继续推进 GitCode 口袋工具项目的开发工作，重点聚焦于仓库列表（即 Star 列表）的展示逻辑、网络请求层的统一封装、仓库信息卡片组件 RepoItem 的设计与实现，以及首页的整体渲染流程和路由结构的组织方式。

一、修改代码

1.1 修改repo.tsx代码

修改"src/types/repo.tsx"的代码，如果没有该文件自行创建一个

代码内容如下：

export interface RepoOwner {
  id?: string | number;
  login?: string;
  name?: string;
  avatar_url?: string;
  html_url?: string;
  type?: string;
}
 
export interface Repo {
  id: string | number;
  name?: string;
  path?: string;
  full_name?: string;
  description?: string;
  language?: string;
  stargazers_count?: number;
  watchers_count?: number;
  commits_count?: number;
  web_url?: string;
  html_url?: string;
  owner?: RepoOwner;
  isStarred?: boolean;
}

1.2 修改client.tsx代码

修改"src/api/client.tsx"的代码

代码内容如下

import axios from 'axios';
 
//改为你的令牌
const DEFAULT_TOKEN = '你的令牌';
let privateToken = DEFAULT_TOKEN;
 
export function setPrivateToken(token?: string) {
  if (token) privateToken = token;
}
 
export const http = axios.create({
  baseURL: 'https://api.gitcode.com/api/v5/',
  timeout: 10000,
});
 
http.interceptors.request.use(config => {
  const headers = config.headers ?? {};
  headers['private-token'] = privateToken;
  config.headers = headers;
  return config;
});
 
http.interceptors.response.use(res => res, err => Promise.reject(err));
 
export function getErrorMessage(error: unknown): string {
  if (axios.isAxiosError(error)) {
    const status = error.response?.status;
    const data = error.response?.data as any;
    const msg = typeof data === 'string' ? data : data?.message || data?.error || error.message;
    return status ? `${status} ${msg}` : msg;
  }
  return String((error as any)?.message || error);
}

1.3 修改user.tsx代码

修改"src/api/user.tsx"的代码

代码内容如下：

// src/api/user.ts
import {http} from './client';
import {UserProfile} from '../types/user';
import {Repo} from '../types/repo';
 
export async function fetchUserProfile(username: string): Promise<UserProfile> {
  const res = await http.get<UserProfile>(`users/${encodeURIComponent(username)}`);
  return res.data;
}
 
export async function fetchStarred(username: string): Promise<Repo[]> {
  const res = await http.get<Repo[]>(`users/${encodeURIComponent(username)}/starred`);
  return res.data;
}

1.4 修改RepoItem.tsx代码

修改"src/components/RepoItem.tsx"的代码，若没有自行创建文件

代码如下：

import React from 'react';
import {View, Text, Image, TouchableOpacity, StyleSheet} from 'react-native';
 
export interface RepoItemProps {
  logo: string;
  name: string;
  description: string;
  language: string;
  stars: number;
  commits: number;
  isStarred: boolean;
  onToggleStar: () => void;
}
 
export function RepoItem(props: RepoItemProps) {
  const {logo, name, description, language, stars, commits, isStarred, onToggleStar} = props;
  return (
    <View style={styles.container}>
      <Image source={{uri: logo}} style={styles.logo} />
      <View style={styles.content}>
        <View style={styles.row}>
          <Text style={styles.name}>{name}</Text>
          <TouchableOpacity onPress={onToggleStar} style={styles.starBtn}>
            <Text style={styles.starText}>{isStarred ? '★ Starred' : '☆ Star'}</Text>
          </TouchableOpacity>
        </View>
        {!!description && <Text style={styles.desc}>{description}</Text>}
        <View style={styles.footer}>
          {!!language && <Text style={styles.lang}>{language}</Text>}
          <Text style={styles.meta}>⭐ {stars}</Text>
          <Text style={styles.meta}>🔗 {commits}</Text>
        </View>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {width: '100%', flexDirection: 'row', padding: 12, borderBottomWidth: 1, borderColor: '#eee', backgroundColor: '#fff'},
  logo: {width: 48, height: 48, borderRadius: 8, backgroundColor: '#eee'},
  content: {flex: 1, marginLeft: 12},
  row: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'},
  name: {fontSize: 16, fontWeight: '700'},
  starBtn: {paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, backgroundColor: '#007aff'},
  starText: {color: '#fff', fontSize: 12},
  desc: {marginTop: 6, fontSize: 13, color: '#333'},
  footer: {flexDirection: 'row', alignItems: 'center', marginTop: 8},
  lang: {fontSize: 12, color: '#666', marginRight: 12},
  meta: {fontSize: 12, color: '#888', marginRight: 12},
});

1.5 修改ExploreScreen.tsx代码

修改"src/screens/ExploreScreen.tsx"的代码

代码内容如下：

import React, {useEffect, useState} from 'react';
import {
  View, 
  Text, 
  StyleSheet, 
  Image, 
  ActivityIndicator, 
  FlatList, 
  TouchableOpacity, 
  Linking
} from 'react-native';
import {fetchUserProfile, fetchStarred} from '../api';
import {UserProfile} from '../types/user';
import {Repo} from '../types/repo';
import {RepoItem} from '../components/RepoItem';
import {getErrorMessage} from '../api/client';
 
interface ExploreScreenProps {
  username?: string;
}
 
export function ExploreScreen({username = 'Deng666'}: ExploreScreenProps) {
  const [user, setUser] = useState<UserProfile | null>(null);
  const [starred, setStarred] = useState<Repo[]>([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [hasError, setHasError] = useState<string>('');
 
  useEffect(() => {
    let mounted = true;
    setIsLoading(true);
    setHasError('');
    Promise.all([
      fetchUserProfile(username),
      fetchStarred(username),
    ])
      .then(([userData, starredData]) => {
        if (!mounted) return;
        setUser(userData);
        setStarred((starredData || []).map(r => ({...r, isStarred: true})));
      })
      .catch(e => {
        if (!mounted) return;
        setHasError(getErrorMessage(e));
      })
      .finally(() => {
        if (!mounted) return;
        setIsLoading(false);
      });
    return () => { mounted = false; };
  }, [username]);
 
  if (isLoading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator />
        <Text style={styles.loadingText}>加载中</Text>
      </View>
    );
  }
 
  if (hasError) {
    return (
      <View style={styles.center}>
        <Text style={styles.errorText}>请求失败：{hasError}</Text>
      </View>
    );
  }
 
  if (!user) {
    return (
      <View style={styles.center}>
        <Text style={styles.errorText}>暂无数据</Text>
      </View>
    );
  }
 
  // 按照文章写法，分离用户信息头部组件
  const UserInfoHeader = () => (
    <View style={styles.header}>
      <Image source={{uri: user.avatar_url}} style={styles.avatar} />
      <Text style={styles.title}>{user.name || user.login}</Text>
      <Text style={styles.subtitle}>类型：{(user as any).type || 'User'}</Text>
      <Text style={styles.subtitle}>粉丝：{user.followers || 0}，关注：{user.following || 0}</Text>
      <TouchableOpacity 
        onPress={() => Linking.openURL(String(user.html_url))} 
        style={styles.linkButton} 
        activeOpacity={0.9}
      >
        <Text style={styles.linkText}>打开主页</Text>
      </TouchableOpacity>
      <Text style={styles.sectionTitle}>已 Star 的仓库</Text>
    </View>
  );
 
  return (
    <FlatList
      data={starred}
      keyExtractor={(item, index) => String(item.id ?? index)}
      renderItem={({item}) => {
        // 🎯 关键修复：处理头像URL
        // 如果仓库所有者的头像URL不存在或为空，使用默认图片
        const avatarUrl = item.owner?.avatar_url;
        const logoUrl = avatarUrl && avatarUrl.trim() !== '' 
          ? avatarUrl 
          : 'https://cdn-img.gitcode.com/logo.png'; // GitCode 默认logo
        
        return (
          <RepoItem
            logo={logoUrl} // ✅ 使用处理后的URL
            name={item.name || item.path || item.full_name || '未知仓库'}
            description={item.description || ''}
            language={item.language || ''}
            stars={item.stargazers_count || 0}
            commits={item.commits_count || item.watchers_count || 0}
            isStarred={!!item.isStarred}
            onToggleStar={() => {
              setStarred(prev =>
                prev.map(r =>
                  (r.id ?? r.name) === (item.id ?? item.name)
                    ? {...r, isStarred: !r.isStarred}
                    : r,
                ),
              );
            }}
          />
        );
      }}
      ListHeaderComponent={<UserInfoHeader />}
      contentContainerStyle={styles.listContent}
      style={styles.flatList}
    />
  );
}
 
const styles = StyleSheet.create({
  center: {
    flex: 1, 
    alignItems: 'center', 
    justifyContent: 'center', 
    backgroundColor: '#FFFFFF'
  },
  loadingText: {
    marginTop: 8, 
    fontSize: 14, 
    color: '#666'
  },
  errorText: {
    fontSize: 14, 
    color: '#d00'
  },
  // FlatList 容器样式 - 关键修复
  flatList: {
    flex: 1,
    width: '100%', // 确保宽度100%
  },
  // ListHeaderComponent 样式
  header: {
    alignItems: 'center', 
    paddingVertical: 24, 
    backgroundColor: '#fff',
    width: '100%', // 确保头部宽度100%
  },
  avatar: {
    width: 120, 
    height: 120, 
    borderRadius: 60, 
    backgroundColor: '#eee'
  },
  title: {
    marginTop: 16, 
    fontSize: 24, 
    fontWeight: '700'
  },
  subtitle: {
    marginTop: 8, 
    fontSize: 16, 
    color: '#666'
  },
  sectionTitle: {
    marginTop: 24, 
    fontSize: 18, 
    fontWeight: '600', 
    color: '#222', 
    alignSelf: 'flex-start', 
    marginLeft: 24
  },
  bio: {
    marginTop: 12, 
    fontSize: 14, 
    color: '#333', 
    paddingHorizontal: 24, 
    textAlign: 'center'
  },
  linkButton: {
    marginTop: 16, 
    paddingHorizontal: 16, 
    paddingVertical: 10, 
    borderRadius: 6, 
    backgroundColor: '#007aff'
  },
  linkText: {
    color: '#fff', 
    fontSize: 14, 
    fontWeight: '600'
  },
  // 关键修复：按照文章写法设置 contentContainerStyle
  listContent: {
    flexGrow: 1,
    backgroundColor: '#f8f9fa', // 文章中的背景色
  },
});

注意：username里面的id名要改成自己git.com里面的id

1.6 修改AppRoot.tsx代码

修改"src/navigation/AppRoot.tsx"的代码

代码内容如下：

import React, {useMemo, useState} from 'react';
import {SafeAreaView, View, StyleSheet} from 'react-native';
import {BottomTabBar, TabItem} from '../components/BottomTabBar';
import HomeScreen from '../screens/HomeScreen';  // 改为默认导入
import { ExploreScreen } from '../screens/ExploreScreen';  // 改为默认导入
import SettingsScreen from '../screens/SettingsScreen';  // 改为默认导入
 
export function AppRoot() {
  const tabs: TabItem[] = [
    {key: 'home', title: '首页'},
    {key: 'explore', title: '探索'},
    {key: 'settings', title: '我的'},
  ];
  const [activeKey, setActiveKey] = useState(tabs[0].key);
 
  const ActiveComponent = useMemo(() => {
    if (activeKey === 'home') return HomeScreen;
    if (activeKey === 'explore') return ExploreScreen;
    if (activeKey === 'settings') return SettingsScreen;
    return HomeScreen;
  }, [activeKey]);
 
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.content}>
        <ActiveComponent />
      </View>
      <BottomTabBar tabs={tabs} activeKey={activeKey} onTabPress={setActiveKey} />
    </SafeAreaView>
  );
}
 
const styles = StyleSheet.create({
  container: {flex: 1, backgroundColor: '#FFFFFF'},
  content: {flex: 1, alignItems: 'center', justifyContent: 'center'},
});

注意这里面修改完代码后会爆红

HomeScreen.tsx、SettingsScreen.tsx这两个文件需要修改一下

二、项目运行

2.1打开手机模拟器

2.2点击运行

2.3项目运行成功

三、注意事项

3.1问题一

在修改ExploreScreen.tsx文件时记得下面图片操作

如果访问不到图片会出现下面情况

红色框内作者没上传头像图片路径无法访问导致图片加载不出来

四、可以扩展的方向

• 分页加载 / 下拉刷新

• Skeleton 骨架屏提升加载体验

• 封装 useRequest 统一管理加载、错误、刷新逻辑

• 抽象 RepoItem 为更通用的列表项组件

五、总结

本篇主要完成了 GitCode 口袋工具的核心内容：

• 网络层统一封装
• RepoItem 组件化设计
• FlatList 高性能渲染
• HarmonyOS Metro 调试与离线包流程

仓库列表结构已搭建完毕，为后续的功能扩展打下坚实的基础。