React Native 实战教程：电商 App 开发实战讲解-JavaScript中文网-JavaScript教程资源分享门户

React Native 是 Facebook 推出的一种跨平台移动应用开发框架，可用于快速构建高质量的原生应用。电商 App 是现代生活中越来越重要的一部分，本文将详细介绍如何使用 React Native 开发一款基于电商场景的 App。

了解 React Native

React Native 是基于 React 的库，用于构建跨平台、原生应用。React Native 可以让我们使用 JavaScript 和 React 构建 iOS 和 Android 平台上的原生应用。React Native 的最大优势在于它可以提供快速的开发周期、高质量的代码和灵活性。

React Native 的优势

React Native 有许多优点，其中最重要的包括：

巨大的生态系统，可利用众多 React 生态系统的资源。
可以使用 JavaScript，避免了需要开发两个代码库的问题。
容易调试，可以在开发过程中不间断地查看应用程序，以及可在应用上执行热加载和重载。
高效，可以使用本地组件和 API，这意味着开发人员可以轻松地编写功能丰富、视觉上保真度高的应用程序。
基于原生组件，这意味着用户可以获得与他们预期的 iOS 或 Android 应用相同的体验。
可扩展，提供了许多第三方插件和库，可以轻松扩展应用程序的功能。

如何使用 React Native？

我们来学习一下如何在 macOS 上使用 React Native 开发本地应用程序：

安装 Homebrew。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 Node.js。

$ brew install node

在 macOS 10.15（Catalina）上，你可能需要使用以下命令：

$ brew install node@10

安装 React Native CLI。

$ npm install -g react-native-cli

创建一个 React Native 项目。

$ react-native init <project_name>

运行 React Native 项目。

$ cd <project_name> 
$ react-native run-ios  // 运行 iOS 版本
$ react-native run-android  // 运行 Android 版本

开发一个电商 App

在这个教程中，我们将学习如何使用 React Native 开发一个简单的电商 App，该 App 可以显示商品、购物车和订单等。我们将使用 Expo，这是构建 React Native 应用程序的开源工具包。

步骤一：使用 Expo 创建项目

安装 Expo CLI。

$ npm install -g expo-cli

创建应用程序。

$ expo init myshop

运行应用程序。

$ cd myshop
$ expo start

步骤二：设计 UI

现在我们已经创建了 Expo 项目及其依赖项，那么我们现在来设计电商 App 的 UI。我们将使用 React Native 元素库和样式表库。

// javascriptcn.com 代码示例
import React, { Component } from 'react'; 
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';

class MyApp extends Component {
render() {
return (
<View style={styles.container}>
<Image source={require('./assets/images/logo.png')} style={{ width: 200, height: 200 }} resizeMode="contain" />
<View style={{ flexDirection: 'row' }}>
<Text style={styles.heading}>Welcome</Text>
<TouchableOpacity>
<Text style={styles.subheading}>Login</Text>  
</TouchableOpacity>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#fff',
},
heading: {
fontSize: 30,
textAlign: 'center',
color: '#1A2930',
fontWeight: 'bold',
marginTop: 100,
},
subheading: {
fontSize: 16,
textAlign: 'center',
color: '#1A2930',
fontWeight: 'bold',
marginTop: 109,
marginLeft: 50,
},
});

export default MyApp;

步骤三：构建 App

安装所需的库。

$ npm install redux react-redux reducer axios

创建 redux 目录和 reducers 目录，并创建 shoppingReducer.js 和 index.js 文件。

shoppingReducer.js：

// javascriptcn.com 代码示例
const ADD_TO_CART = "ADD_TO_CART";

const initialState = {
products: [
{id: "1", name: "iPhone11", price: 999, image: "https://source.unsplash.com/rDEOVtE7vOs/100x100/"},
{id: "2", name: "Pixel4", price: 699, image: "https://source.unsplash.com/cVvR6HTeoW8/100x100/"},
{id: "3", name: "GalaxyS20", price: 799, image: "https://source.unsplash.com/ENJYmafiP0o/100x100/"},
{id: "4", name: "OnePlus8", price: 699, image: "https://source.unsplash.com/yE1XwlAJWk8/100x100/"},
],
cart: [],
};

const shoppingReducer = (state = initialState, action) => {
switch (action.type) {
case ADD_TO_CART: {
const productId = action.payload.productId;
const product = state.products.find((item) => item.id === productId);

return {
...state,
cart: [...state.cart, product],
};
}

default:
return state;
}
};

export default shoppingReducer;

index.js 文件：

// javascriptcn.com 代码示例
import { combineReducers } from "redux";

import shoppingReducer from "./shoppingReducer";

const rootReducer = combineReducers({
shopping: shoppingReducer,
});

export default rootReducer;

在 App.js 中使用 Redux。

// javascriptcn.com 代码示例
import React, { useEffect } from "react"; 
import { StyleSheet, View } from "react-native";
import { Provider } from "react-redux";
import axios from "axios";
import { createStore } from "redux";
import rootReducer from "./redux";

const store = createStore(rootReducer);

axios.defaults.baseURL = "https://fakestoreapi.com/";

const App = () => {
return (
<Provider store={store}>
<View style={styles.container}>
// TODO: 添加其他组件
</View>
</Provider>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
},
});

export default App;

步骤四：完善 App

添加 App 导航。

// javascriptcn.com 代码示例
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppNavigator = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />  
<Stack.Screen name="Product" component={ProductScreen} />
<Stack.Screen name="Cart" component={CartScreen} /> 
</Stack.Navigator>
</NavigationContainer>
);
};

export default AppNavigator;

添加电商场景中的其他功能。

添加商品列表、商品详情页、购物车页。
编写处理购物车、结算订单的逻辑。
响应式布局。

步骤五：测试并发布

在 Expo 项目中，你可以使用 Expo 官方应用程序进行测试。测试完成后，你可以使用 Expo SDK 发布应用程序。你也可以使用 Xcode 或 Android Studio 发布应用程序。

总结

在本教程中，我们了解了 React Native 的优点，并学习了使用 React Native 开发电商 App 的基本知识。我们使用了 Expo 和 JavaScript 来构建一个简单的应用程序。我们还学习了如何使用 React Native 元素库和样式库设计应用程序的 UI，并使用 React Redux 库管理应用程序的状态。最后，我们添加了应用程序功能，并测试了应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653e27d67d4982a6eb7b9e35