wuba/taro-playground

The Taro Playground App is a cross-platform application developed using Taro, to help developers develop and debug Taro applications.

taro-playground's Issues

github action 运行环境更新

平台	系统
Android	不变
iOS	MacOS 13

接入热更新服务

需求描述

0. 方便发布。
1. 提供热更新接入示例。

todo

0. 考虑接入 app center
1. 通过 action 触发热更新发布

扫码后显示error msg:request timeout

我跑的是 https://github.com/wuba/Taro-Mortgage-Calculator 这个项目，taro版本3.5.7，taro-playground版本1.8.1

Android端APP启动报错 密码错误 希望修改

Execution failed for task ':app:packageDebug'.

A failure occurred while executing com.android.build.gradle.tasks.PackageAndroidArtifact$IncrementalSplitterRunnable
com.android.ide.common.signing.KeytoolException: Failed to read key androiddebugkey from store "/Volumes/project/个人项目/taro/taro-playground/android/app/debug.keystore": keystore password was incorrect

提供加载 release bundle 方案

功能描述

0. 用户将应用进行打包后，通过cdn，github release assets 等形式进行存储。
1. 其他用户使用扫描功能，加载bundle运行。
2. 提供方便的 action 供项目接入，支持在github中打包 bundle 并生成二维码。
3. 方便 demo 等项目进行传播。

todo

0. 注意版本号兼容的处理。
1. 注意打包时的 isdev、platform 参数的处理。

format.h:580:9: note: in instantiation of member function

~/taro-playground/ios/Pods/Headers/Public/fmt/fmt/format.h:580:9: note: in instantiation of member function 'fmt::basic_string_viewfmt::internal::char8_type::basic_string_view' requested here
: basic_string_viewinternal::char8_type(
^

添加crash监控

运行 yarn ios 报如下错误

Error message

xcodebuild[9510:1400671] DVTCoreDeviceEnabledState: DVTCoreDeviceEnabledState_Disabled set via user default (DVTEnableCoreDevice=disabled)
--- xcodebuild: WARNING: Using the first of multiple matching destinations:
{ platform:iOS Simulator, id:3D28E7C6-28B1-456C-861B-F0FF0C32BF49, OS:16.4, name:iPhone 14 }
{ platform:iOS Simulator, id:3D28E7C6-28B1-456C-861B-F0FF0C32BF49, OS:16.4, name:iPhone 14 }
** BUILD FAILED **


The following build commands failed:
        CompileC /Users/kenny/Library/Developer/Xcode/DerivedData/taroDemo-bhudqnvehprncdezkduoxyigqosy/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/React-Codegen.build/Objects-normal/arm64/FBReactNativeSpec-generated.o
/Users/kenny/taro-playground/ios/build/generated/ios/FBReactNativeSpec/FBReactNativeSpec-generated.mm
normal arm64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'React-Codegen' from project 'Pods')
(1 failure)

React Native Info

System:
    OS: macOS 13.3
    CPU: (8) arm64 Apple M1
    Memory: 76.19 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.19.0/bin/yarn
    npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.4, iOS 16.4, macOS 13.3, tvOS 16.4, watchOS 9.4
    Android SDK:
      API Levels: 25, 28, 29, 30, 31, 32, 33
      Build Tools: 29.0.2, 30.0.3
      System Images: android-31 | Google APIs ARM 64 v8a
      Android NDK: 22.1.7171670
  IDEs:
    Android Studio: 2022.1 AI-221.6008.13.2211.9619390
    Xcode: 14.3/14E222b - /usr/bin/xcodebuild
  Languages:
    Java: 19.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: ^18.1.0 => 18.2.0 
    react-native: ^0.70.5 => 0.70.7 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

请问要怎么解决？

taro-playground error

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., js engine: hermes

PS D:\code\myApp> yarn dev:rn --qr
yarn run v1.22.21
$ npm run build:rn -- --watch --qr --qr

[email protected] build:rn
taro build --type rn --watch --qr --qr

👽 Taro v3.6.21

本地起playground在ios上挂

我的环境：
xcode: v14.3.1
node： v16.20.0

repro step:

• yarn -> yarn upgradePeerdeps -> yarn build:rn --platform ios -> yarn start -> yarn ios (npx react-native run-ios --no-packager --simulator 'iPhone 14 Pro')

yarn ios的时候报错和这个是这个issue里#91 一样的错：
然后我用xcode直接build，报错'value' is unavailable: introduced in iOS 12.0，按照这个帖子fix了facebook/react-native#34106 (comment)

然后继续yarn ios，成功，但是metro那边开始报错

 ERROR  Invariant Violation: Tried to register two views with the same name RNSVGRect
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
        A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/shinn/Documents/opensource/taro-playground/node_modules/react-native/index.js: 

None of these files exist:
  * node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.scss|.scss|.native.sass|.sass|.native.less|.less|.native.css|.css|.native.pcss|.pcss|.native.json|.json|.native.styl|.styl|.native.cjs|.cjs|.native.svgx|.svgx)
  * node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.scss|.scss|.native.sass|.sass|.native.less|.less|.native.css|.css|.native.pcss|.pcss|.native.json|.json|.native.styl|.styl|.native.cjs|.cjs|.native.svgx|.svgx)
  15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
  16 | import typeof Button from './Libraries/Components/Button';
> 17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
     |                                   ^
  18 | import typeof DrawerLayoutAndroid from './Libraries/Components/DrawerAndroid/DrawerLayoutAndroid';
  19 | import typeof FlatList from './Libraries/Lists/FlatList';
  20 | import typeof Image from './Libraries/Image/Image';
    at ModuleResolver.resolveDependency (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:152:15)
    at DependencyGraph.resolveDependency (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/node-haste/DependencyGraph.js:264:43)
    at Object.resolve (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/lib/transformHelpers.js:170:21)
    at resolveDependencies (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/DeltaBundler/graphOperations.js:466:33)
    at processModule (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/DeltaBundler/graphOperations.js:232:31)
    at async addDependency (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
    at async Promise.all (index 1)
    at async processModule (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/DeltaBundler/graphOperations.js:279:3)
    at async addDependency (/Users/shinn/Documents/opensource/taro-playground/node_modules/metro/src/DeltaBundler/graphOperations.js:361:18)
    at async Promise.all (index 0)
Error: Unable to resolve module ./Libraries/Components/DatePicker/DatePickerIOS from /Users/shinn/Documents/opensource/taro-playground/node_modules/react-native/index.js: 

None of these files exist:
  * node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.scss|.scss|.native.sass|.sass|.native.less|.less|.native.css|.css|.native.pcss|.pcss|.native.json|.json|.native.styl|.styl|.native.cjs|.cjs|.native.svgx|.svgx)
  * node_modules/react-native/Libraries/Components/DatePicker/DatePickerIOS/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.jsx|.jsx|.native.scss|.scss|.native.sass|.sass|.native.less|.less|.native.css|.css|.native.pcss|.pcss|.native.json|.json|.native.styl|.styl|.native.cjs|.cjs|.native.svgx|.svgx)

simulator上就一直白屏。这个该如何解决？谢谢

Taro 3.6.0不支持

使用Taro [email protected]、@1.8.0.x
都会报错误

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., js engine: hermes

望尽快支持Taro 3.6.0

或者还有没有别的什么调试方式，不需要降Taro版本的？

How to open developer menu?

Under development mode, how to open developer menu?

全新taro init什么都不做创建新项目安卓启动报错

相关平台

React Native

使用框架

React

环境信息

macos monterey 12.2.1
nodejs: v12.16.3
taro:  v3.4.1
react-native: ^0.66.0

复现步骤

taro init 选择rn模版
yarn upgradePeerdeps
yarn start

期望结果

成功打开app

实际结果

扫码后，启动了app，但是红屏报错

错误截图如下

请问，这个和本地安卓环境应该无关吧，ios是正常的

javac --version
javac 17.0.2

尝试解决

使用测试手机 华为meta 30pro
更换手机小米 note
结果是一样的

yarn ios ----build commands failed

The following build commands failed:
CompileC /Users/mac/Library/Developer/Xcode/DerivedData/taroDemo-bukgeqacgqpxgrgzivmhyneopmqe/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/RCT-Folly.build/Objects-normal/x86_64/json.o /Users/mac/WebstormProjects/taro-playground/ios/Pods/RCT-Folly/folly/json.cpp normal x86_64 c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'RCT-Folly' from project 'Pods')

taro-playground-1.4.8在11月4日rn官方bug之后发布Android失败

相关平台
React Native

使用框架
React

环境信息
windows7
jdk8
gradle6.9
nodejs: v12.22.11
taro: v3.4.10

复现步骤
下载并解压 taro-playground-1.4.8
yarn upgradePeerdeps
yarn build:rn --platform android
cd android
gradlew assembleRelease

结果
发布apk失败(如下)

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':app:checkReleaseAarMetadata'.

Multiple task action failures occurred:
A failure occurred while executing com.android.build.gradle.internal.tasks.CheckAarMetadataWorkAction
> The minCompileSdk (31) specified in a
dependency's AAR metadata (META-INF/com/android/build/gradle/aar-metadata.properties)
is greater than this module's compileSdkVersion (android-30).
Dependency: androidx appcompat:appcompat:1.4.1
AAR metadata file: C:\Users\Administrator.gradle\caches\transforms-3\3a0feba48fed99a23f9c4bbf34263afa\transforms\appcompat:1.4.1\META-INF\com\android\build\gradle\arr-metadata.properties

尝试解决
删除node_modules
修改 package.json的 "react-native": "0.67.5",
yarn upgradePeerdeps
yarn build:rn --platform android
cd android
gradlew assembleRelease
结果还是发布失败

首页增加 input 输入框

0. 支持输入链接进行跳转

使用 pnpm 减少空间占用

working

这个项目是不支持小程序查看吗？

运行 yarn dev:weapp 后报错：

./node_modules/@react-native-community/cameraroll/js/CameraRoll.js
Module build failed (from ./node_modules/@tarojs/mini-runner/node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/ruoxie/Github/taro-playground/node_modules/@react-native-community/cameraroll/js/CameraRoll.js: Support for the experimental syntax 'flow' isn't currently enabled (32:8):

30 | };
31 |

32 | export type GroupTypes = $Keys;
| ^
33 |
34 | export type Include =
35 | | 'filename'

Add @babel/preset-flow (https://git.io/JfeDn) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-flow (https://git.io/vb4yb) to the 'plugins' section to enable parsing.

xcode 14 编译失败

CocoaPods/CocoaPods#11402

facebook/react-native#34673

app中的示例页面间跳转显示错乱

安卓端，页面间跳转内容错乱

app启动不了报错

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening taroDemo.xcworkspace

release 页面，添加下载二维码

需求描述

0. 提供下载二维码，线上在release详情中

拉取代码编译安卓app报错

Task :expo:compileDebugKotlin FAILED
\node_modules\expo\android\src\main\java\expo\modules\ReactNativeHostWrapperBase.kt: (50, 3): 'getUIImplementationProvider' overrides nothing
\node_modules\expo\android\src\main\java\expo\modules\ReactNativeHostWrapperBase.kt: (50, 76): Unresolved reference: UIImplementationProvider
\node_modules\expo\android\src\main\java\expo\modules\ReactNativeHostWrapperBase.kt: (51, 12): Not enough information to infer type variable T
请问这是和我本机开发环境有关吗

安卓每次调试都需要扫码或输入，不显示历史列表

APP 沙盒方案

扫描加载不同 app 后，多个 app 之间未隔离，可能产生风险。

0. APP权限隔离
1. 文件存储隔离。
2. storage存储隔离。
3. RN包直接调用问题处理。

启用 Hermes

文档

https://reactnative.dev/docs/hermes

问题

• Taro RN 在编译时，没有使用 react-native/scripts/react-native-xcode.sh 和 node_modules/react-native/react.gradle
  以至于没有进行字节码的打包，相关内容需要进行重构
• 入口文件通过 --entry-file 传入 node_modules/metro/src/node-haste/DependencyGraph/assets/empty-module.js

手机软件扫码、手动输入服务地址时无法正常预览

1. 测试项目，https://github.com/wuba/Taro-Mortgage-Calculator
2. 昨天在自己家里网络是可以正常预览的，到了公司环境后无法预览
3. 电脑和手机连接的同一个wifi，经过测试网络是通的。我在电脑上随便启动了个服务，手机通过局域网ip，http协议可以访问到，但是taro rn启动的应用，就无法预览
4. 手机为苹果，手机软件版本为1.7.0，taro-rn应用依赖包通过yarn安装，启动脚本为：npm run dev:rn
   

ios本地构建失败 麻烦管理员有时间更新一下podfile.lock和yarn.lock 新版本xcode始终有问题

添加样式测试demo

0. 样式单位 rem、px、rpx。
1. 跨平台样式。
2. classname。
3. 全局样式。
4. css module
5. ...

支持 schema 跳转

问题描述

0. 支持 taro:// 协议进行跳转。跳转加载 metro sever 或者远程的jsbundle。

参考文档

0. https://reactnative.dev/docs/next/linking#sendintent-android

添加自定义字体支持

提供添加自定义字体的方案

小程序与h5使用webpack5

优化打包时间

目前打包阶段中

Build Taro React Native Bundle 2m29s

npm run start 出错

系统:windows
[email protected]

 ERROR  Invariant Violation: Tried to register two views with the same name RNCSafeAreaProvider
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
 ERROR  Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
      This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

iOS端启动报错 希望修改

error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.app, by opening taroDemo.xcworkspace

Taro3.2 运行 yarn dev:h5

taro-react-native修改apk文件名称为中文后乱码

打包生成apk文件,修改app_name=中文后,安装包名称变成乱码

麻烦问下taro-rn可以使用windows开发吗

麻烦问下taro-rn在开发之处是否为windows做过适配

taro3.2 RN调试问题

这个特性解决了什么问题？
npm run dev:rn

没有出链接，没有出二维码

获取到 http://127.0.0.1:8081/index.bundle?platform=ios&dev=true

Taro playgound 和 Expo 访问都不行

Taro 3.2 版本如何调试呢？

这个 API 长什么样？
能通过扫码进行开发时调试，看到开发时候的页面与功能

taro3.6.11更新了虚拟列表支持，playground辛苦更新一下对应的新功能

项目更新到最新3.6.11之后，运行发现这两个回调并没有执行（rn和支付宝小程序），想看看官方代码是怎么写的学习一下

支持小程序与h5运行

正常运行demo。

yarn dev:tt 编译抖音小程序报错

✖ Errors:

ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: {path}/node_modules/react-native/index.js: Unexpected token, expected "{" (14:7)

12 |
13 | // Components

14 | import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| ^
15 | import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
16 | import typeof Button from './Libraries/Components/Button';
17 | import typeof DatePickerIOS from './Libraries/Components/DatePicker/DatePickerIOS';
at parser.next ()
at normalizeFile.next ()
at run.next ()
at transform.next ()

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

yarn ios在iphone14 simulator中打不开

能否在readme中补充一下具体的node、xcode版本
xcode版本是14.3.1

支持 Taro 的 UI 库 都支持 RN 么？

如题

增加 redux 示例

[Bug] 安卓首页扫码功能，选择图片后没有自动加载图片中二维码对应的地址

问题描述

playground安卓app，首页扫码时，通过选择相册内的二维码图片识别地址。选择图片后，没有自动加载对应的服务
（ios端是正常的）

期望

选择图片后，能正常加载图片中二维码对应的地址

版本

playground 1.3.6
taro 3.3.19

how to support monorepo?

如题

依赖收集，如有需要加入app的依赖，请回复此 issue

为方便调试，本 APP 支持必要的依赖加入。

lib	version	app version	status
react-native-svg	12.1.1	>= 1.3.0	released
@shopify/flash-list	1.1.0	>=1.4.10	released
@shopify/react-native-skia	0.1.134	>=1.6.0	released
react-native-reanimated	2.9.0	>=1.6.0	released
expo-gl	11.3.0	>=1.6.0	released
lottie-react-native	5.1.3	>=1.6.0	released
lottie-ios	3.2.3	>=1.6.0	released
react-native-linear-gradient	2.6.2	>=1.6.2	released

欢迎 PR

0. yarn add xxxx
1. yarn
2. 提交 PR 至 main 分支

add "global" tabbar item to show some global capabilities

需求描述

0. 展示生命周期
1. 展示路由api
2. 展示 hooks