React Native template for a quick start with React Navigation5 and TypeScript. It's cross-platform runs on Android, iOS, and the web.

Overview

对此项目的规划

出于兴趣把自己做 android、ios 开发过程中经验积累沉淀一下,此工程架构会定期更新升级依赖到最新版本,并不断的积累 App 中常用组件和基础页面功能,也会不断优化代码组织架构

此项目对以下情形会有帮助

  • 想用前端技术做 app 开发却无从下手
  • 想在项目中运用 typescript 进行开发的
  • 遇到 RN 本地环境运行或打包后报错及打包后 app 闪退等
  • 想了解学习 RN 跨三端开发的
  • 想快速上手开发一款 app 的

目录结构如下:

├── App.tsx
├── android
├── app.json
├── assets
│   ├── fonts
│   └── images
│       ├── adaptive-icon.png
│       ├── favicon.png
│       ├── icon.png
│       └── splash.png
├── babel.config.js
├── index.js
├── ios
├── metro.config.js
├── package.json
├── src
│   ├── api
│   │   ├── externalApi.ts
│   │   └── index.ts
│   ├── assets
│   ├── components
│   │   ├── Layout
│   │   ├── Context
│   │   ├── Header
│   │   ├── Loading
│   │   ├── Restart
│   │   ├── Toast
│   │   ├── WebView
│   │   └── index.ts
│   ├── config
│   │   └── index.ts
│   ├── constants
│   │   ├── index.ts
│   │   └── rootConst.ts
│   ├── hooks
│   │   ├── index.ts
│   │   ├── useColorScheme.ts
│   │   ├── useLoadedAssets.ts
│   │   ├── useLocation.js
│   │   ├── useMyTheme.ts
│   │   ├── useRootState.ts
│   │   └── useUserInfo.ts
│   ├── index.tsx
│   ├── navigation
│   │   ├── BottomTabNavs.tsx
│   │   ├── LinkingConfig.ts
│   │   ├── NavConfig.tsx
│   │   ├── StackNavs.tsx
│   │   └── index.tsx
│   ├── reducers
│   │   ├── index.ts
│   │   └── rootState.ts
│   ├── screens
│   │   ├── NotFound.tsx
│   │   ├── auth
│   │   ├── demo
│   │   ├── home
│   │   └── my
│   ├── types
│   │   ├── index.tsx
│   │   └── types.tsx
│   └── utils
│       ├── CryptoJS.js
│       ├── checkIdCard.ts
│       ├── errorHandler.ts
│       ├── eventEmit.ts
│       ├── index.ts
│       ├── jsbridge.min.js
│       ├── jsbridge.ts
│       ├── request.ts
│       ├── smokesignals.js
│       ├── store.ts
│       └── websocket.ts
├── tsconfig.json
├── webpack.config.jsb.js

App 打包以安卓平台为例

  • yarn android 本地开发
  • yarn android-test 内网测试包
  • yarn android-prod 外网正式包

技术选型

  • react-native 跨平台 app 框架
  • react-navigation5 路由
  • typescript
  • react-native-elements UI 基础组件库
  • expo 开发调试器

开发调试(两种方式):

Expo 快速模式

  • 全局安装 expo-cli: npm install -g expo-cli
  • 项目根目录执行 yarn web, 会自动打开浏览器 web 页出现二维码,手机需安装 Expo App 扫描二维码进行开发调试,代码改动保存后会实时更新视图

React-Native-Cli 模式

  • USB 连接真机,执行 yarn android 命令,会自动安装开发模式下生成的 apk 到手机安装,代码改动手机中的 app 能实时更新视图

  • 注意需要先把本地基本环境安装好 如 Android SDK: 官方文档开发环境安装

如何增加一个业务页面

  • 在 screens 目录新建页面, 如: screens/my/My.tsx
  • 页面 tsx 文件需包含以下基本结构:
import * as React from 'react';
import { View, Text } from 'react-native';
import { Layout } from '../../components';

export default function Demo() {
  return (
    <Layout>
      <View>
        <Text>新建业务页面</Text>
      </View>
    </Layout>
  );
}

// Layout 是封装好的主内容区布局组件,这个组件的设计主要负责处理所有页面共用逻辑及平台兼容性问题,目前已集成 SafeAreaView, ScrollView 功能;

关于 webview 中 APP 与 H5 通信

App 端已经封装了 JSBridge 实现 App 与 H5 相互通信,把 JSBridge 类实例注入到了 H5 页面中的 window 对象下,所以 H5 中通过 window.AppJSBridge 可访问 JSBridge 的所有方法与属性,由于注入是异步的,在 window.AppJSBridgeOnReady 回调中才能调用实例方法和属性。

H5 页面中通过 window.AppJSBridge.callNative 与 App 通信:

/**
* callNative(type, params, callback)
* @param {type} 调 RN 的服务标识
* @param {params 可选} 向 RN 传递参数
* @param {callback} RN 处理后回调 web
*/
window.AppJSBridgeOnReady = function() {
    alert(JSON.stringify(window.AppJSBridge.appInfo))
    window.AppJSBridge.callNative('getLoginInfo', {}, data => {
      alert(JSON.stringify(data))
    })
 }

代码规范

事件函数以 on 开头,如:

<BtnCom title="确认支付" onPress={onPay} />

JSX 虚拟 DOM 结构分拆以 render 开头,如:

const renderForm = () => {
  return (
    <View style={styles.formBox}>
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <FormInput
            inputStyle={[styles.input]}
            onBlur={onBlur}
            leftIcon={(style) => <Text style={[style]}>联系人</Text>}
            onChangeText={(value) => onChange(value)}
            value={value}
          />
        )}
        name="userName"
        rules={{ required: true }}
      />
    </View>
  );
};

return (
  <Content>
    <View style={styles.selectItem}>
      {groupProject.map((item, index) => (
        <Button
          containerStyle={[styles.selectItemButton]}
          key={index}
          title={item.projectName}
          onPress={() => setSelectedIndex(index)}
          type={selectIndex === index ? 'solid' : 'outline'}
        />
      ))}
    </View>
    {renderForm()}
  </Content>
);

最后

  • 仅以此项目抛砖引玉,相互学习有所进步,如有问题请提 Issues, 我会第一时间解答
  • 如果你觉得这个项目对你有所帮助,欢迎 Star 支持鼓励,谢谢
Owner
Benson
Benson
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 9 Dec 6, 2021
A cross-platform (iOS / Android), full-featured, highly customizable web browser module for React Native apps.

react-native-webbrowser A cross-platform (iOS / Android), full-featured in-app web browser component for React Native that is highly customizable. Cur

Dan 192 Dec 28, 2021
A Cross Platform(Android & iOS) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.

react-native-actions-sheet A highly customizable cross platform ActionSheet for react native. Screenshots Features Cross Platform (iOS and Android) Na

Ammar Ahmed 678 Jan 14, 2022
An awesome and cross-platform React Native date picker and calendar component for iOS and Android

react-native-common-date-picker An awesome and cross-platform React Native date picker and calendar component for iOS and Android. This package is des

chenlong 68 Jan 17, 2022
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-picker A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sectio

Dan 397 Dec 23, 2021
A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sections.

react-native-modal-selector A cross-platform (iOS / Android), selector/picker component for React Native that is highly customizable and supports sect

Peace 330 Jan 15, 2022
A cross-platform (iOS / Android) single and multiple-choice React Native component.

react-native-multiple-choice A cross-platform (iOS / Android) single and multiple-choice React Native component. Install npm i react-native-multiple-c

Dan 67 Dec 4, 2021
A android like toast for android and ios, android use native toast, ios use UIView+Toast

React Native Toast (remobile) A android like toast for react-native support for ios and android Installation npm install @remobile/react-native-toast

YunJiang.Fang 347 Jul 23, 2021
Tabbed navigation that you can swipe between, each tab can have its own ScrollView and maintain its own scroll position between swipes. Pleasantly animated. Customizable tab bar

react-native-scrollable-tab-view This is probably my favorite navigation pattern on Android, I wish it were more common on iOS! This is a very simple

Tomas Roos 6.8k Jan 18, 2022
Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

webRidge 29 Jan 10, 2022
react-native-wheel-picker ★190 - React native cross platform picker.

react-native-wheel-picker Introduction Cross platform Picker component based on React-native. Since picker is originally supported by ios while Androi

Yu Zheng (Sam) 289 Jan 4, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 322 Jan 18, 2022
A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app

react-native-idle-timer A cross-platform bridge that allows you to enable and disable the screen idle timer in your React Native app Install npm insta

Marc Shilling 139 Jan 4, 2022
⚛ Cross-platform React Native dialogs based on the Modal component

React Native Simple Dialogs ⚛ Cross-platform React Native dialogs based on the Modal component. Features Custom Dialog Confirm Dialog Progress Dialog

Douglas Nassif Roma Junior 234 Dec 28, 2021
🗺 A simple react-native library to perform cross-platform map actions (Google or Apple Maps)

react-native-open-maps ?? A simple cross-platform library to help perform map actions to the corresponding device's map (Google or Apple Maps) react-n

Brandon Him 243 Jan 19, 2022
React-Native cross-platform, calendar component.

React Native Calendar Datepicker Description This project aims at providing developers with a cross-platform, highly customizable, calendar date picke

Vlad-Doru Ion 85 Jan 9, 2022
Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker.

react-native-multi-selectbox Platform independent (Android / iOS) Selectbox | Picker | Multi-select | Multi-picker. The idea is to bring out the commo

Saurav Gupta 140 Jan 9, 2022
Quick and easy icons in React Native

WARNING: This library is discontinued, I highly recommend using https://github.com/oblador/react-native-vector-icons There's far bigger problems to so

Cory Smith 1.2k Dec 28, 2021
Easy, convenient, quick-forming Wizard component for React Native

React Native Wizard Easy, convenient, quick-forming Wizard component for React Native. Also this package is providing simple usage with few props and

Talut TASGIRAN 66 Jan 13, 2022