最后更新: 2026-06-05v-green

React Native 跨端项目简历示例

主题配置

排版主题

代码高亮

示例一：新闻资讯 App（React Native）

项目名称

XX 新闻资讯客户端（React Native）

项目背景

公司从 Web 转向移动端，需要快速开发 iOS 和 Android 双端 App。团队熟悉 React 技术栈，选择 React Native 实现跨平台开发，快速迭代产品。

业务场景

新闻列表：推荐流、分类频道、视频新闻
文章详情：图文内容、评论互动、相关推荐
搜索：关键词搜索、热门话题、历史记录
个人中心：收藏、历史、设置
推送通知：实时新闻、个性化推荐

核心职责

1. 离线缓存 - 新闻列表

业务场景： 用户在地铁等弱网环境阅读新闻

问题

新闻列表每次都请求接口，加载慢
弱网环境加载失败，显示空白
用户流量消耗大

解决方案

使用 AsyncStorage 缓存新闻列表
使用 react-native-mmkv 缓存图片
新闻详情缓存到本地数据库
离线时展示缓存内容

技术实现

javascript

// cache.js
import AsyncStorage from '@react-native-async-storage/async-storage';
import { MMKV } from 'react-native-mmkv';

const storage = new MMKV();

class CacheManager {
  // 缓存新闻列表
  async cacheNewsList(category, data) {
    const key = `news_list_${category}`;
    const cacheData = {
      data,
      timestamp: Date.now(),
      expire: 30 * 60 * 1000  // 30分钟
    };

    await AsyncStorage.setItem(key, JSON.stringify(cacheData));
  }

  // 读取缓存
  async getNewsList(category) {
    const key = `news_list_${category}`;
    const cached = await AsyncStorage.getItem(key);

    if (!cached) return null;

    const { data, timestamp, expire } = JSON.parse(cached);

    // 检查过期
    if (Date.now() - timestamp > expire) {
      return null;
    }

    return data;
  }

  // 缓存图片
  cacheImage(url, base64) {
    storage.set(url, base64);
  }

  // 读取图片
  getImage(url) {
    return storage.getString(url);
  }
}

export default new CacheManager();

业务使用

javascript

// NewsList.js
import React, { useState, useEffect } from 'react';
import cache from './cache';

function NewsList({ category }) {
  const [news, setNews] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadNews();
  }, [category]);

  async function loadNews() {
    // 先读缓存
    const cached = await cache.getNewsList(category);
    if (cached) {
      setNews(cached);
      setLoading(false);
    }

    // 请求接口
    try {
      const res = await api.getNews(category);
      setNews(res.data);

      // 更新缓存
      await cache.cacheNewsList(category, res.data);
    } catch (error) {
      // 接口失败，使用缓存
      if (!cached) {
        setNews([]);
      }
    } finally {
      setLoading(false);
    }
  }

  return (
    <FlatList
      data={news}
      renderItem={({ item }) => <NewsItem data={item} />}
      refreshing={loading}
      onRefresh={loadNews}
    />
  );
}

项目成果

缓存命中率 70%
弱网环境加载成功率从 65% 提升到 95%
流量消耗减少 55%

2. 启动优化 - 秒开体验

业务场景： 用户打开 App 查看新闻

问题

冷启动白屏时间长达 4 秒
首屏渲染慢，用户体验差
JS Bundle 体积大，加载慢

解决方案

启用 Hermes 引擎，提升 JS 执行速度
代码分割，按需加载
骨架屏优化，消除白屏
预加载首屏数据

技术实现

javascript

// 启用 Hermes (android/app/build.gradle)
project.ext.react = [
    enableHermes: true
]

// 骨架屏
function NewsList() {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  if (loading) {
    return <SkeletonScreen />;
  }

  return <FlatList data={data} />;
}

// 代码分割
const DetailScreen = lazy(() => import('./screens/DetailScreen'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <DetailScreen />
    </Suspense>
  );
}

// 预加载数据
function App() {
  useEffect(() => {
    // App启动时预加载
    prefetchData();
  }, []);

  async function prefetchData() {
    // 并行请求
    await Promise.all([
      api.getHotNews(),
      api.getUserInfo(),
      api.getConfig()
    ]);
  }
}

项目成果

冷启动从 4 秒优化到 1.8 秒
使用 Hermes 后 JS 执行速度提升 40%
TTI（可交互时间）从 3 秒降到 1.2 秒

3. 图片优化 - 加载性能

业务场景： 新闻列表和详情有大量图片

问题

图片加载慢，影响阅读体验
大图占用内存多，容易 OOM
滑动列表卡顿

解决方案

使用 react-native-fast-image 库
图片懒加载，可视区域才加载
图片压缩，降低内存占用
使用 CDN 加速

技术实现

javascript

import FastImage from 'react-native-fast-image';

// 优化后的图片组件
function OptimizedImage({ uri, width, height }) {
  return (
    <FastImage
      source={{
        uri,
        priority: FastImage.priority.normal,
        cache: FastImage.cacheControl.immutable
      }}
      style={{ width, height }}
      resizeMode={FastImage.resizeMode.cover}
    />
  );
}

// 列表中的图片懒加载
function NewsList() {
  const renderItem = ({ item, index }) => {
    return (
      <View>
        {/* 前3条立即加载，其他延迟 */}
        {index < 3 ? (
          <FastImage source={{ uri: item.image }} />
        ) : (
          <LazyImage uri={item.image} />
        )}
      </View>
    );
  };

  return <FlatList renderItem={renderItem} />;
}

// 懒加载组件
function LazyImage({ uri }) {
  const [visible, setVisible] = useState(false);

  return (
    <ViewabilityHelper
      onVisible={() => setVisible(true)}
    >
      {visible ? (
        <FastImage source={{ uri }} />
      ) : (
        <Placeholder />
      )}
    </ViewabilityHelper>
  );
}

项目成果

图片加载速度提升 60%
内存占用减少 40%
列表滑动流畅度提升 50%

4. Native 模块 - 原生能力

业务场景： 分享新闻、调用相机、推送通知

问题

React Native 自带功能有限
需要调用原生 SDK
iOS 和 Android 实现不同

解决方案

封装 Native Module
使用第三方库（react-native-share、react-native-camera）
统一接口，屏蔽平台差异

技术实现

javascript

// 分享模块 (ShareModule.js)
import { NativeModules, Platform } from 'react-native';
import Share from 'react-native-share';

class ShareModule {
  async shareText(content) {
    try {
      await Share.open({
        message: content,
        title: '分享到'
      });
    } catch (error) {
      console.log('分享取消');
    }
  }

  async shareImage(imageUrl, content) {
    try {
      await Share.open({
        message: content,
        url: imageUrl,
        title: '分享到'
      });
    } catch (error) {
      console.log('分享取消');
    }
  }

  async shareToWeChat(content) {
    if (Platform.OS === 'android') {
      // Android 调用原生模块
      NativeModules.WeChatShare.share(content);
    } else {
      // iOS 调用原生模块
      NativeModules.RNWeChatShare.share(content);
    }
  }
}

export default new ShareModule();

// 使用
import ShareModule from './ShareModule';

function NewsDetail({ article }) {
  const handleShare = () => {
    ShareModule.shareText(`${article.title} ${article.url}`);
  };

  return (
    <TouchableOpacity onPress={handleShare}>
      <Text>分享</Text>
    </TouchableOpacity>
  );
}

项目成果

支持微信、微博、QQ 等平台分享
分享成功率 99%
新增用户 40% 来自分享

5. 性能监控 - 卡顿追踪

业务场景： 监控 App 性能，定位卡顿问题

问题

不知道哪些页面卡顿
无法复现用户问题
缺少数据支撑优化

解决方案

使用 react-native-performance 监控
记录页面渲染时间
上报卡顿数据
接入 Sentry 崩溃监控

技术实现

javascript

import { InteractionManager, PerformanceObserver } from 'react-native';
import Sentry from '@sentry/react-native';

class PerformanceMonitor {
  init() {
    // 监控 JS 线程
    this.monitorJSThread();

    // 监控页面渲染
    this.monitorPageRender();
  }

  monitorJSThread() {
    let lastTime = Date.now();

    setInterval(() => {
      const now = Date.now();
      const delay = now - lastTime - 100;

      // 延迟超过50ms认为卡顿
      if (delay > 50) {
        this.reportJank({
          type: 'js_thread',
          delay
        });
      }

      lastTime = now;
    }, 100);
  }

  monitorPageRender() {
    const observer = new PerformanceObserver((list) => {
      list.getEntries().forEach((entry) => {
        if (entry.duration > 1000) {
          this.reportJank({
            type: 'page_render',
            name: entry.name,
            duration: entry.duration
          });
        }
      });
    });

    observer.observe({ entryTypes: ['measure'] });
  }

  reportJank(data) {
    // 上报到服务器
    fetch('https://monitor.example.com/jank', {
      method: 'POST',
      body: JSON.stringify(data)
    });
  }
}

// 页面渲染监控
function NewsDetail() {
  useEffect(() => {
    const start = Date.now();

    InteractionManager.runAfterInteractions(() => {
      const duration = Date.now() - start;

      // 记录渲染时间
      analytics.track('page_render', {
        page: 'NewsDetail',
        duration
      });
    });
  }, []);

  return <View>...</View>;
}

项目成果

发现并优化 15+ 个卡顿点
平均渲染时间从 1.2 秒降到 600ms
用户留存率提升 20%

6. 热更新 - CodePush

业务场景： 紧急修复 bug，快速发布功能

问题

应用商店审核慢，需要 3-5 天
紧急问题无法快速修复
功能迭代周期长

解决方案

使用 CodePush 热更新
支持强制更新、静默更新
灰度发布，降低风险
版本管理和回滚

技术实现

javascript

import codePush from 'react-native-code-push';

// CodePush 配置
const codePushOptions = {
  checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
  installMode: codePush.InstallMode.IMMEDIATE,
  mandatoryInstallMode: codePush.InstallMode.IMMEDIATE
};

// App 组件
class App extends Component {
  componentDidMount() {
    this.checkUpdate();
  }

  checkUpdate() {
    codePush.sync({
      updateDialog: {
        title: '发现新版本',
        optionalUpdateMessage: '是否立即更新？',
        optionalInstallButtonLabel: '更新',
        optionalIgnoreButtonLabel: '稍后'
      },
      installMode: codePush.InstallMode.IMMEDIATE
    });
  }

  render() {
    return <Root />;
  }
}

export default codePush(codePushOptions)(App);

// 发布更新
// appcenter codepush release-react -a username/appname -d Production

// 灰度发布 (20%)
// appcenter codepush release-react -a username/appname -d Production --rollout 20

项目成果

紧急修复时间从 5 天缩短到 30 分钟
功能迭代周期从 2 周缩短到 3 天
99% 用户在 24 小时内更新

技术栈

React Native、TypeScript、Redux、CodePush、Hermes、Sentry

项目成果

支持 iOS 和 Android，代码复用率 85%
开发效率提升 60%，双端同步开发
冷启动 1.8 秒，接近原生
日活 200 万，月活 800 万
崩溃率 0.3%，行业领先
热更新覆盖率 99%

示例二：电商 App（React Native）

项目名称

XX 生活电商 App（React Native）

业务场景

商品浏览：首页推荐、分类、搜索
商品详情：图文、视频、评价
购物车：商品管理、凑单推荐
订单：下单、支付、物流
用户：个人中心、优惠券、积分

核心职责

1. 缓存优化 - 商品数据

业务场景： 缓存商品列表、详情、用户信息

解决方案

使用 React Query 管理缓存
商品列表缓存 10 分钟
商品详情缓存 30 分钟
自动后台刷新

技术实现

javascript

import { useQuery } from 'react-query';

function ProductList({ category }) {
  const { data, isLoading, refetch } = useQuery(
    ['products', category],
    () => api.getProducts(category),
    {
      cacheTime: 10 * 60 * 1000,  // 缓存10分钟
      staleTime: 5 * 60 * 1000,   // 5分钟内认为数据新鲜
      refetchOnMount: false,
      refetchOnWindowFocus: false
    }
  );

  return (
    <FlatList
      data={data}
      refreshing={isLoading}
      onRefresh={refetch}
    />
  );
}

项目成果

接口请求减少 70%
页面切换瞬间响应
服务器压力降低 60%

2. 启动优化 - 商城首页

业务场景： 用户打开 App 浏览商品

解决方案

首屏 SSR，服务端渲染
图片懒加载
商品卡片虚拟列表
预加载首屏数据

项目成果

首屏时间从 3 秒降到 1.5 秒
LCP 从 2.5 秒降到 1 秒
转化率提升 15%

3. 长列表优化 - 商品列表

业务场景： 商品列表有上千个商品

解决方案

使用 FlatList virtualization
图片懒加载
分页加载
优化 renderItem

技术实现

javascript

function ProductList() {
  const renderItem = useCallback(({ item }) => (
    <ProductCard product={item} />
  ), []);

  const keyExtractor = useCallback((item) => item.id, []);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      maxToRenderPerBatch={10}
      windowSize={5}
      initialNumToRender={10}
      removeClippedSubviews={true}
      getItemLayout={(data, index) => ({
        length: 200,
        offset: 200 * index,
        index
      })}
    />
  );
}

项目成果

列表滑动流畅，60fps
内存占用减少 50%
支持 10000+ 商品流畅滑动

技术栈

React Native、TypeScript、React Query、Reanimated

项目成果

日活 150 万，GMV 5000 万/月
转化率 8%，行业领先
代码复用率 85%
开发成本节省 50%

面试话术（React Native 项目）

开场（30 秒）

"我做的是一个新闻资讯 App，技术栈是 React Native。选择 RN 主要是因为我们团队熟悉 React，而且 RN 的生态很完善，有大量开源库可以用。项目支持 iOS 和 Android 双端，代码复用率 85%。"

亮点展开

如果问 RN 性能： "RN 性能确实不如原生，但通过优化可以接近原生。我主要做了几件事：一是启用 Hermes 引擎，JS 执行速度提升 40%；二是列表优化，使用 FlatList 的虚拟化，支持上万条数据流畅滑动；三是图片优化，使用 FastImage 库，加载速度提升 60%。优化后 App 很流畅，用户基本感知不到和原生的差异。"

如果问热更新： "我们用的是 CodePush。它可以绕过应用商店，直接推送 JS 代码和资源。我们有个紧急 bug 修复的案例，晚上 8 点发现问题，9 点发布热更新，10 点 99% 用户已更新。如果走正常发版，iOS 审核至少要 3 天。CodePush 还支持灰度发布，可以先给 20% 用户更新，观察稳定性再全量。"

如果问技术难点： "最难的是长列表性能优化。我们新闻列表有上千条数据，一开始滑动很卡。我做了几个优化：一是使用 FlatList 的 getItemLayout，告诉它每个 item 的高度，减少计算；二是图片懒加载，只加载可视区域的图片；三是优化 renderItem，用 React.memo 和 useCallback 避免不必要的重渲染。优化后从 30fps 提升到 60fps。"

数据记忆

冷启动 4s → 1.8s
Hermes 提升 40%
缓存命中率 70%
代码复用率 85%
热更新覆盖率 99%
日活 200 万
崩溃率 0.3%