wuba / taro-mortgage-calculator Goto Github PK

View Code? Open in Web Editor NEW

349.0 25.0 78.0 14.46 MB

首个 Taro 3 多端统一实例 - 支持 React Native，Weapp，H5。

Home Page: https://wuba.github.io/Taro-Mortgage-Calculator

License: MIT License

JavaScript 2.81% TypeScript 80.45% SCSS 16.17% HTML 0.56%

taro react-native react miniprogram taro3 wechat wechat-mini-program wechat-app react-native-app cross-platform

taro-mortgage-calculator's Introduction

Mortgage-Calculator

Taro 3 - MortgageCalculator

从左到右：React Native、Weapp、H5

基于Taro 3开发的多端（React Native、Weapp、H5）实例

开发React Native，推荐阅读React Native 端开发流程和React Native 端开发前注意

项目介绍

目录结构：

├── config
├── global.d.ts
├── metro.config.js // Taro 3 RN metro 配置文件
├── package.json
├── project.config.json
├── src
│   ├── app.config.ts
│   ├── app.rn.scss // 针对RN的单独样式
│   ├── app.scss
│   ├── app.ts
│   ├── assets
│   ├── components // 封装的一些多端组件
│   ├── index.html
│   ├── pages
│   └── utils
├── tsconfig.json
└── yarn.lock

此项目旨在为Taro 3开发多端应用提供一个可参考的案例，封装一些支持多端的组件，提供一份开发多端应用的思路、技巧，能够快速上手开发

在线预览

React Native	小程序	H5
安卓：taroDemo.apk IOS：taroDemo.app(IOS模拟器包)		https://wuba.github.io/Taro-Mortgage-Calculator

使用 Taro Playground 预览

下载安装 Taro Playground。
本地运行 yarn dev:rn，打印二维码。或者打开releases页面。
使用 APP 扫描二维码加载 bundle，进行预览。

本地运行

  # clone到本地
  git clone https://github.com/wuba/Taro-Mortgage-Calculator.git
  
  # 进去项目根目录
  cd Taro-Mortgage-Calculator
  
  # 安装依赖
  yarn
  
  # 运行RN 默认端口8081
  yarn dev:rn

  # 运行微信小程序
  yarn dev:weapp

  # 运行H5
  yarn dev:h5

License

MIT

taro-mortgage-calculator's People

Contributors

Stargazers

Watchers

taro-mortgage-calculator's Issues

执行yarn run build:rn 后，并没有看到rn_temp文件夹，只有ios, 和 andriod 文件夹。

生成的二维码QR，扫描提示“packager is not avaliable”

执行了编译命令，Taro App扫码报错

基于 Taro 开发的三端组件，UT怎么做同构

现在基于 taro 平台解析以及其他的多端能力，写了一个组件库，组件库能适配三端，但是 UT 不知道怎么写适合，主要有两个问题

用的 jest + react-testing-library , 主要 RN 端需要用 @testing-library/react-native , 在小程序/h5端又需要用 @testing-library/react
组件库本身是依赖 Taro的平台解析文件的能力，将端的差异处理拆解到不同的文件，而 jest 本身也没有这块按平台解析的的能力

现在想求教你们多端同构的项目是怎么写UT的啊？

扫码后报错TypeError: undefined is not an object (evaluating '_expoModulesCore.NativeModulesProxy.ExpoUpdates')

ERROR TypeError: undefined is not an object (evaluating '_expoModulesCore.NativeModulesProxy.ExpoUpdates')
LOG Running "taroDemo" with {"rootTag":11}
ERROR Invariant Violation: "taroDemo" has not been registered. This can happen if:

Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

使用 taro-native-shell 加载bundle，报错

启动的时候报错 React Refresh runtime should not be included in the production bundle

如何解决，谢谢

shell用的0.64.0的版本

// 运行的是这条命令
"ios": "react-native run-ios",

详细报错内容

[Thu May 13 2021 14:12:51.391]  BUNDLE  ./index 

[Thu May 13 2021 14:13:01.430]  ERROR    Error: React Refresh runtime should not be included in the production bundle.
[Thu May 13 2021 14:13:01.440]  ERROR    Error: Requiring module "node_modules/react-native/Libraries/Core/InitializeCore.js", which threw an exception: Error: React Refresh runtime should not be included in the production bundle.
[Thu May 13 2021 14:13:01.450]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Thu May 13 2021 14:13:02.300]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

H5版本没有顶部导航区域

H5版本没有顶部导航区域，无法返回

代码跑不起来

node版本：v16.20.1
taro cli版本：Taro v3.5.7
执行yarn安装依赖，报：
[2/4] 🚚 Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version ">=18". Got "16.20.1"
error Found incompatible module.
根据错误提示把node版本切换为v18.17.1后重新安装依赖,安装成功，执行yarn run dev:h5，报：

Error: Unable to resolve module `./index` from ``: 

None of these files exist:
  * index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * index/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
    at ModuleResolver.resolveDependency (/Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
    at DependencyGraph.resolveDependency (/Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/node-haste/DependencyGraph.js:287:16)
    at /Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/lib/transformHelpers.js:267:42
    at Server.<anonymous> (/Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/Server.js:841:41)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (/Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/Server.js:99:24)
    at _next (/Volumes/CodeFile/小程序/Taro-Mortgage-Calculator/node_modules/metro/src/Server.js:119:9)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

How to build or integrate a release react native ios/android APP?

I want to build a release react native ios/android APP, and publish it to App Store. Have any tutorial or docs for this?

#BUG#demo不能跑起来

根据readme最后终端执行没有报错，如下：


$ taro build --type rn --platform android --watch --port 8081
👽 Taro v3.2.0-canary.5

Tips: 预览模式生成的文件较大，设置 NODE_ENV 为 production 可以开启压缩。
Example:
$ NODE_ENV=production taro build --type rn --watch


  #####   ##   #####   ####     #####  ######   ##    ####  #####    #    #   ##   ##### # #    # ######
    #    #  #  #    # #    #    #    # #       #  #  #    #   #      ##   #  #  #    #   # #    # #
    #   #    # #    # #    #    #    # #####  #    # #        #      # #  # #    #   #   # #    # #####
    #   ###### #####  #    #    #####  #      ###### #        #      #  # # ######   #   # #    # #
    #   #    # #   #  #    #    #   #  #      #    # #    #   #      #   ## #    #   #   #  #  #  #
    #   #    # #    #  ####     #    # ###### #    #  ####    #      #    # #    #   #   #   ##   ######

React-Native Dev server is running on port: 8081


To reload the app press "r"
To open developer menu press "d"
                 Welcome to React Native!
                Learn once, write anywhere

但是浏览器访问127.0.0.1:8081 提示：GET http://127.0.0.1:8081/ 404 (Not Found)

跟预期的完全不一致呀，请问这是什么问题，我看了下编译后的文件：

➜  dist git:(master) tree
.
└── rn
    └── ios
        ├── assets
        │   ├── node_modules
        │   │   ├── @react-navigation
        │   │   │   └── stack
        │   │   │       └── lib
        │   │   │           └── commonjs
        │   │   │               └── views
        │   │   │                   └── assets
        │   │   │                       ├── back-icon-mask.png
        │   │   │                       ├── back-icon.png
        │   │   │                       ├── [email protected]
        │   │   │                       └── [email protected]
        │   │   └── @tarojs
        │   │       ├── components-rn
        │   │       │   └── dist
        │   │       │       └── assets
        │   │       │           ├── loading-warn.png
        │   │       │           ├── loading.png
        │   │       │           └── video
        │   │       │               └── play.png
        │   │       └── taro-rn
        │   │           └── dist
        │   │               └── lib
        │   │                   ├── scanCode
        │   │                   │   ├── icon_close.png
        │   │                   │   └── icon_pic.png
        │   │                   └── showModal
        │   │                       └── success.png
        │   └── src
        │       └── assets
        │           └── images
        │               ├── comm_form_icon_gouxuan.png
        │               ├── comm_form_icon_weigouxuan.png
        │               ├── esf_calculator_icon_close.png
        │               ├── esf_calculator_icon_question.png
        │               ├── esf_calculator_img_bggradient.png
        │               ├── esf_calculator_img_building.png
        │               ├── esf_calculator_img_mark.png
        │               ├── esf_calculator_img_percent.png
        │               ├── yz_prop_icon_arrow.png
        │               └── yz_prop_icon_arrow_white.png
        └── main.jsbundle

本地如何生成链接？

本地跑起来如何生成这种 https://cdn.jsdelivr.net/gh/wuba/[email protected]/release/ios/main.js 链接，在手机上用Taro APP 扫码预览？