React Native移动电商应用：实战案例（从零实现）

从零打造一个 React Native 电商 App：实战全记录（附核心技巧）

你有没有过这样的经历？
项目紧急上线，老板说“iOS 和 Android 都要上”，团队却只有两个前端。原生开发人手不够，外包成本太高，时间又卡得死死的——这时候，跨平台方案就成了救命稻草。

而在这条路上走得最稳、生态最成熟的，非React Native莫属。

今天，我就带你用React Native从零搭建一个真实的移动电商应用：涵盖商品展示、购物车管理、用户登录、订单提交等完整链路。不讲虚的，只聊实战中踩过的坑和真正管用的解法。

为什么选 React Native 做电商 App？

先说结论：如果你的团队已经有 Web 技术栈积累，想快速出产品、低成本覆盖双端，React Native 是现阶段最优解之一。

它不像 Ionic 那样跑在 WebView 里“卡成 PPT”，也不像 Flutter 要求全员学 Dart —— 它直接用 JavaScript + React 的方式写原生 UI，学习曲线平缓，开发效率极高。

更重要的是，热重载（Hot Reloading）真的能让你少重启 100 次 App。改个样式、调个逻辑，保存即生效，简直是迭代神器。

我们这个电商项目正是基于这些优势设计的：
- 使用Flexbox实现响应式布局
- 用Context + useReducer管理全局状态
- 封装axios处理 API 请求
- 搭配React Navigation构建多层级导航

接下来，我会像带新人一样，一步步拆开讲清楚每个模块是怎么落地的。

页面怎么排？Flexbox 是你的第一把工具

刚接触 React Native 的人常犯一个错误：拿 CSS 的思维硬套 RN 布局。但其实，RN 的 Flexbox 更纯粹、更严格，没有 float、position:absolute 这些“野路子”，一切靠flex、justifyContent和alignItems控制。

比如我们要做一个简单的商品卡片：

<View style={styles.card}> <Image source={{ uri: product.image }} style={styles.image} /> <View style={styles.info}> <Text style={styles.title}>{product.name}</Text> <Text style={styles.price}>¥{product.price}</Text> </View> </View>

对应的样式可以这样写：

const styles = StyleSheet.create({ card: { flexDirection: 'row', // 水平排列图片和文字 padding: 12, borderBottomWidth: 1, borderBottomColor: '#eee', }, image: { width: 80, height: 80, marginRight: 16, }, info: { flex: 1, // 占据剩余空间 justifyContent: 'center', }, title: { fontSize: 16, fontWeight: '500', }, price: { fontSize: 14, color: '#d44', marginTop: 4, } });

这里的关键是：
-flexDirection: 'row'决定主轴方向；
-flex: 1让文本区域自动撑满右边空白；
-justifyContent和alignItems分别控制垂直居中和水平对齐。

⚠️ 小贴士：根容器通常设置flex: 1，否则可能无法填满屏幕。这是新手最容易忽略的一点。

如果要做适配平板或大屏设备，可以用Dimensions动态判断宽度：

import { Dimensions } from 'react-native'; const { width } = Dimensions.get('window'); const isLargeScreen = width >= 768; // 根据屏幕大小调整列数 const numColumns = isLargeScreen ? 3 : 2;

再配合FlatList渲染商品网格，就能实现真正的响应式布局。

购物车状态怎么管？别急着上 Redux

很多教程一上来就教你怎么集成 Redux，结果配置一堆 middleware，最后发现项目根本没那么复杂。

对于中小型电商 App，我推荐更轻量的组合拳：React Context + useReducer。

这套方案足够应对购物车、用户登录、主题切换等常见场景，还不需要额外依赖。

先看结构设计

我们创建一个CartContext.js文件，封装整个购物车的状态管理和操作方法：

// context/CartContext.js import React, { createContext, useReducer } from 'react'; const CartContext = createContext(); const cartReducer = (state, action) => { switch (action.type) { case 'ADD_TO_CART': return { ...state, items: [...state.items, action.payload], }; case 'REMOVE_FROM_CART': return { ...state, items: state.items.filter(item => item.id !== action.payload), }; case 'CLEAR_CART': return { ...state, items: [], }; default: return state; } }; export const CartProvider = ({ children }) => { const [cartState, dispatch] = useReducer(cartReducer, { items: [] }); return ( <CartContext.Provider value={{ cartState, dispatch }}> {children} </CartContext.Provider> ); }; export default CartContext;

然后在入口文件包裹一下：

// App.js import { CartProvider } from './context/CartContext'; import AppNavigator from './navigation/AppNavigator'; function App() { return ( <CartProvider> <AppNavigator /> </CartProvider> ); } export default App;

现在任意组件都可以通过useContext获取购物车数据了：

// components/CartIcon.js import React, { useContext } from 'react'; import CartContext from '../context/CartContext'; const CartIcon = () => { const { cartState } = useContext(CartContext); const count = cartState.items.length; return ( <View style={styles.container}> <Ionicons name="cart" size={24} color="#000" /> {count > 0 && <Badge>{count}</Badge>} </View> ); };

你会发现，每当调用dispatch({ type: 'ADD_TO_CART', payload })，所有订阅该 context 的组件都会自动更新。

✅ 优点总结：
- 无需 props 层层传递
- 状态变更可预测（类似 Redux）
- 零第三方依赖，维护成本低

当然，如果你的应用后期变得非常复杂（比如有促销引擎、库存同步），再考虑升级到 Redux Toolkit 或 Zustand 也不迟。

和后端怎么通信？封装一个智能客户端

电商系统的命脉是 API。拉商品列表、查库存、下订单、验证 token……这些请求必须统一管理，不能到处fetch()。

我的做法是：封装一个基于 axios 的 API 客户端，集中处理 baseURL、超时、认证头注入和错误拦截。

// api/client.js import axios from 'axios'; import AsyncStorage from '@react-native-async-storage/async-storage'; const client = axios.create({ baseURL: 'https://api.example.com/v1', timeout: 10000, headers: { 'Content-Type': 'application/json', }, }); // 请求拦截器：自动带上 JWT token client.interceptors.request.use(async (config) => { const token = await AsyncStorage.getItem('authToken'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); // 响应拦截器：统一处理 401、网络异常等情况 client.interceptors.response.use( (response) => response.data, // 直接返回 data (error) => { if (error.response?.status === 401) { // token 失效，跳转登录页 console.log('请重新登录'); } return Promise.reject(error); } ); export default client;

有了这个 client，后续所有请求都变得清爽：

// api/products.js import client from './client'; export const getProducts = () => client.get('/products'); export const getProductById = (id) => client.get(`/products/${id}`); export const createOrder = (orderData) => client.post('/orders', orderData);

组件里只需要 import 函数即可使用：

useEffect(() => { getProducts().then(setProducts); }, []);

而且未来如果要加日志、埋点、重试机制，只需修改客户端一处代码，全项目生效。

页面跳转怎么做？React Navigation 上手指南

导航是 App 的骨架。React Native 社区几乎公认的选择就是React Navigation—— 它灵活、稳定、文档齐全，支持堆栈、标签栏、抽屉等多种模式。

我们以最常见的「首页 → 商品详情」为例：

安装必要包：

npm install @react-navigation/native @react-navigation/native-stack npx pod-install ios

然后定义导航器：

// navigation/AppNavigator.js import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import HomeScreen from '../screens/HomeScreen'; import ProductDetailScreen from '../screens/ProductDetailScreen'; const Stack = createNativeStackNavigator(); function AppNavigator() { return ( <NavigationContainer> <Stack.Navigator screenOptions={{ headerBackTitleVisible: false }}> <Stack.Screen name="Home" component={HomeScreen} options={{ title: '商城首页' }} /> <Stack.Screen name="ProductDetail" component={ProductDetailScreen} options={({ route }) => ({ title: route.params.name || '商品详情' })} /> </Stack.Navigator> </NavigationContainer> ); } export default AppNavigator;

在首页点击商品时跳转：

// HomeScreen.js const handlePress = (item) => { navigation.navigate('ProductDetail', { id: item.id, name: item.name, }); }; return ( <FlatList data={products} renderItem={({ item }) => ( <ProductCard onPress={() => handlePress(item)} product={item} /> )} /> );

在详情页接收参数也很简单：

// ProductDetailScreen.js const ProductDetailScreen = ({ route }) => { const { id } = route.params; const [product, setProduct] = useState(null); useEffect(() => { getProductById(id).then(setProduct); }, [id]); if (!product) return <Loading />; return ( <View style={styles.container}> <Image source={{ uri: product.image }} style={styles.image} /> <Text style={styles.title}>{product.name}</Text> <Text style={styles.price}>¥{product.price}</Text> </View> ); };

📌 提示：createNativeStackNavigator使用原生驱动动画，滑动返回更流畅，强烈推荐用于正式项目。

实战中的关键问题与应对策略

1. 不同手机屏幕太杂？自适应才是王道

不要写死width: 300这种值。建议：
- 字体大小用动态计算（如fontSize: width > 400 ? 16 : 14）
- 图片区块按比例缩放（如width: '45%'）
- 复杂布局用StyleSheet.flatten结合条件渲染

还可以引入react-native-responsive-screen这类库做更精细控制。

2. 图片加载慢怎么办？

默认的<Image>组件没有缓存机制，频繁上下滑会重复请求。

解决方案：换用react-native-fast-image

npm install react-native-fast-image

使用方式完全兼容 Image：

import FastImage from 'react-native-fast-image'; <FastImage style={styles.image} source={{ uri: product.image, priority: FastImage.priority.high, }} resizeMode={FastImage.resizeMode.contain} />

它支持内存+磁盘双缓存、优先级调度、预加载，大幅提升滚动流畅度。

3. 断网了还能用吗？本地缓存必须安排

电商 App 最怕的就是“刚挑好东西，一提交提示无网络”。

我们可以利用AsyncStorage缓存关键数据：

// 缓存购物车 useEffect(() => { const saveCart = async () => { await AsyncStorage.setItem('cart', JSON.stringify(cartState.items)); }; saveCart(); }, [cartState.items]); // 启动时恢复 useEffect(() => { const loadCart = async () => { const saved = await AsyncStorage.getItem('cart'); if (saved) dispatch({ type: 'RESTORE_CART', payload: JSON.parse(saved) }); }; loadCart(); }, []);

虽然这不是完整的离线方案，但至少能让用户看到自己加购的内容。

4. 安全性如何保障？

别把 token 明文存在AsyncStorage！虽然方便，但它本质上只是个字符串存储，容易被逆向提取。

进阶做法：
- 使用react-native-keychain存储敏感信息（基于系统密钥链）
- 所有 API 强制 HTTPS
- 加签防篡改（如有必要）

至少做到前两点，安全性就有质的提升。

整体架构一览：清晰分层才好维护

这个电商 App 我们采用了典型的五层架构：

层级	技术实现	职责
UI 层	React Native 组件 + Flexbox	视觉呈现、交互反馈
状态管理层	Context + useReducer	管理购物车、用户状态
服务层	Axios 封装 + Interceptor	统一处理请求与响应
数据层	AsyncStorage + Keychain	本地持久化
导航层	React Navigation	页面跳转与路由