该项目是使用 React Native 技术栈开发的一个 demo,并集成了路由控制、开发规范、状态管理、网络请求等功能,可作为后续 RN 项目开发的基础架子。
以 macOS 开发 IOS 应用为例,讲述环境的搭建。
首先检查一下 Node 版本,确保 Node 主版本>=12,否则需升级,前往Node 官网下载最新版本。
Watchman 是 Facebook 推出的监听文件变化的工具,(macOS 上)必须安装此工具,否则会报错,项目不能运行。可使用 Homebrew 安装。
brew install watchman
不过国外网络访问受限,大概率是安装不成功的,推荐直接下载安装包。前往Watchman Release下载形如watchman-vYYYY.MM.DD.00-macos.zip
的安装包。下载好解压后,在解压文件夹,执行以下代码,即可安装配置成功。
sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
sudo cp bin/* /usr/local/bin
sudo cp lib/* /usr/local/lib
sudo chmod 755 /usr/local/bin/watchman
sudo chmod 2777 /usr/local/var/run/watchman
点击此处可查看官方安装说明
Xcode 用于开发和打包 IOS 应用,其也内置了 IOS 模拟器,以方便开发调试,必须安装。在 AppStore 搜索"Xcode"安装即可。(PS:应用较大,12G+,需耐心等待下载~)
下载后,再安装模拟器,安装路径 Xcode -> Preferences... -> Components
,选择一个 iOS 版本进行下载即可。
CocoaPods 是使用 Ruby 开发的用于 IOS APP 的软件包管理工具,类似于 NPM,也必须安装,可通过 sudo 进行安装。
sudo gem install cocoapods
安装 CocoaPods 时尽量开启代理,并且切换为全局模式,对 git 也需进行设置代理。安装过程中可能会时断时续,一般重试几次即可安装完成。安装过程中遇到问题,可访问CocoaPods 官网查看解决方案。
git config --global http.proxy 'socks5://127.0.0.1:your-port'
git config --global https.proxy 'socks5://127.0.0.1:your-port'
git clone https://github.com/jealyn/react-native-demo.git
yarn
npx pod-install
yarn start
yarn ios # ios调试
yarn android # 安卓调试
React Native Debugger 是开发 ReactNative 时的调试工具,其是基于官方远程调试器开发的一款独立的应用,内置了 React DevTools、Redux DevTools,可用来调试组件、状态、网络请求等。
macOS 用户可直接使用 Homebrew 安装
brew install --cask react-native-debugger
其它平台用户可前往Releases页面下载适合系统的安装包。
注意,该调试器默认并不能调试 http 请求,需要修改配置。
打开下载好的软件,点击 Debugger -> Open Config File,打开配置文件,将其中的defaultNetworkInspect
修改为true
,再重新启动即可,配置永久有效。
要调试 Redux,需额外安装 Redux DevTools Extension,并进行配置。
yarn add redux-devtools-extension -D
配置如下所示:
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
const store = createStore(
reducer,
composeWithDevTools(
applyMiddleware(/* your middleware */)
// other store enhancers if any
)
);
本项目配置了eslint
、prettier
用于进行代码的静态检测和格式化,使用commitlint
、husky
、lint-staged
等用于 git commit 时执行代码校验和 commit message 校验。
若要修改 eslint 配置,可编辑项目根目录下的.eslintrc.js
和.eslintignore
文件。若要修改 prettier 配置,则更改项目根目录下的.prettierrc.js
和.prettierignore
文件。若要修改 Git 提交时的 message 校验,请编辑项目根目录下的.commitlintrc.js
文件。
下面讲一下 husky 的配置。
npx husky-init && yarn
npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky set .husky/pre-commit "npx --no-install lint-staged"
在 package.json
中,对 lint-staged 进行了如下配置,可根据项目需要进行修改
{
"lint-staged": {
"src/**/*.{js,jsx,ts,tsx}": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
"src/**/*.{js,jsx,ts,tsx,json}": "prettier --write"
}
}
本项目使用的 React Navigation 进行导航。导航相关代码位于 src/router 文件夹下。包含了两种使用路由方式,一种是堆栈式路由(NativeStackNavigator),一种是底部标签式菜单(BottomTabNavigator)。在组件中使用导航的方式也相当简单,使用 navigition prop 即可:
import React from 'react';
import { View, Text, Button } from 'react-native';
export default ({ navigation }) => (
<View>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
<Button title="Navigate with params" onPress={() => navigation.navigate('Detail', { id: 1 })} />
</View>
);
在普通的 js 文件中,也可使用导航功能。
import * as navigation from '../../router/navigation';
navigation.navigate('Login');
更多用法可访问React Navigation Docs查看。
本项目使用 Redux 及相关插件来实现状态管理功能。相关代码位于 src/router 文件夹下。
本项目中引入了 Redux 持久化存储功能,可将需要的 store 数据持久化存储至 AsyncStorage 中。
在组件中使用的方式也很简单,以函数式组件为例:
/**
* @file index.tsx
* @description redux使用示例
*/
import React from 'react';
import { Text, Button, View } from 'react-native';
import { useSelector, useDispatch } from 'react-redux';
import { decrementAction, incrementAction } from '../../store/actions/common';
export default () => {
const num = useSelector(=> state.common.num);
const dispatch = useDispatch();
return (
<View>
<Text>{num}</Text>
<Button title="+" onPress={() => dispatch(incrementAction()} />
<Button title="-" onPress={() => dispatch(decrementAction())} />
</View>
);
}
完整 API 和用法可访问React Redux 官网查看。
该项目的 http 请求使用 axios 库实现,代码位于 src/utils/request.js,实现了 http 请求和响应的拦截。
接口请求位于 src/api 文件夹下,仿照 common.ts 文件编写 api 请求即可。
import request from '@/utils/request';
export const getSomeListApi = () => request.get('/api/somelist');
将启动屏图片放置在 assets 文件夹下,并重命名为 bootsplash_original.png。然后在终端中执行如下代码:
yarn react-native generate-bootsplash assets/bootsplash_original.png --assets-path=assets --logo-width=375
此时就生成了启动屏图片,然后重新启动 app 即可看到效果
yarn ios # 启动ios
yarn android # 启动安卓
启动屏插件使用的是 react-native-bootsplash,可点击此处查看详细用法。
该项目引入了 react-native-webview 插件,可实现 webview 页面的跳转,使用方式为:
navigation.navigate('WebView', { url: 'the webview url' });
可点击此处查看该插件的详细用法。
│ .gitignore
│ package.json
│ README.md
│
├─node_modules # 三方依赖文件
│
├─ios # ios文件夹
│
├─android # android文件夹
│
└─src
│ App.js # 入口文件
├─api # 接口文件夹
├─assets # 静态文件,如图片,视频等
├─components # 公用组件,抽取出来存放此文件夹
├─views # 页面容器
├─styles # 公共样式
├─router # 路由
├─store # 状态管理
└─utils # 常用工具文件夹
对于 api 请求方法,统一按照模块分类,一个模块为一个独立的文件,统一存放在 src/api 目录下,接口命名以 xxxApi 的方式
- 获取列表数据的 get 方法,使用 get...ListApi 的模式命名, 如 getBusinessListApi
- 获取详情数据的 get 方法,使用 get...DetailApi 的模式命名,如 getBusinessDetailApi
- 添加数据的 post 方法,使用 add...Api 的模式命名,如 addBusinessApi
- 修改数据的 put 方法,使用 modify...Api 的模式命名,如 modifyBusinessApi
- 删除数据的 delete 方法,使用 delete...Api 的模式命名,如 deleteBusinessApi
项目配置了代码编写规范和 git 提交规范。
代码编写规范包含eslint
、prettier
,用于进行代码的静态检测和格式。
git 提交规范使用commitlint
、husky
、lint-staged
,其会在提交代码时对暂存区的代码进行 pre-commit 校验和 commit-msg 校验,检验失败则提交不成功,根据错误信息进行修改再次提交即可。