出于兴趣把自己做 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
- yarn android 本地开发
- yarn android-test 内网测试包
- yarn android-prod 外网正式包
- react-native 跨平台 app 框架
- react-navigation5 路由
- typescript
- react-native-elements UI 基础组件库
- expo 开发调试器
- 全局安装 expo-cli: npm install -g expo-cli
- 项目根目录执行 yarn web, 会自动打开浏览器 web 页出现二维码，手机需安装 Expo App 扫描二维码进行开发调试，代码改动保存后会实时更新视图
-
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 功能;
App 端已经封装了 JSBridge 实现 App 与 H5 相互通信，把 JSBridge 类实例注入到了 H5 页面中的 window 对象下，所以 H5 中通过 window.AppJSBridge 可访问 JSBridge 的所有方法与属性，由于注入是异步的，在 window.AppJSBridgeOnReady 回调中才能调用实例方法和属性。
/**
* 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))
})
}
<BtnCom title="确认支付" onPress={onPay} />
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 支持鼓励，谢谢