Skip to content

该项目是使用 React Native 技术栈开发的一个 demo,并集成了路由控制、开发规范、状态管理、网络请求等功能,可作为 RN 项目开发的基础架子

Notifications You must be signed in to change notification settings

jealyn/react-native-demo

Repository files navigation

react-native-demo

该项目是使用 React Native 技术栈开发的一个 demo,并集成了路由控制、开发规范、状态管理、网络请求等功能,可作为后续 RN 项目开发的基础架子。

环境安装

以 macOS 开发 IOS 应用为例,讲述环境的搭建。

Node & Watchman

首先检查一下 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 & CocoaPods

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

启动安卓/ios 调试

yarn ios # ios调试

yarn android # 安卓调试

开发调试

React Native Debugger 是开发 ReactNative 时的调试工具,其是基于官方远程调试器开发的一款独立的应用,内置了 React DevTools、Redux DevTools,可用来调试组件、状态、网络请求等。

安装步骤

macOS 用户可直接使用 Homebrew 安装

brew install --cask react-native-debugger

其它平台用户可前往Releases页面下载适合系统的安装包。

调试 http 请求

注意,该调试器默认并不能调试 http 请求,需要修改配置。

打开下载好的软件,点击 Debugger -> Open Config File,打开配置文件,将其中的defaultNetworkInspect修改为true,再重新启动即可,配置永久有效。

调试 Redux

要调试 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
  )
);

项目使用说明

开发规范说明

本项目配置了eslintprettier用于进行代码的静态检测和格式化,使用commitlinthuskylint-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 请求

该项目的 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,可点击此处查看详细用法。

webview 跳转

该项目引入了 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 提交规范。

代码编写规范包含eslintprettier,用于进行代码的静态检测和格式。

git 提交规范使用commitlinthuskylint-staged,其会在提交代码时对暂存区的代码进行 pre-commit 校验和 commit-msg 校验,检验失败则提交不成功,根据错误信息进行修改再次提交即可。

About

该项目是使用 React Native 技术栈开发的一个 demo,并集成了路由控制、开发规范、状态管理、网络请求等功能,可作为 RN 项目开发的基础架子

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy