Taro React-Native 的一些踩坑和实践记录

856 阅读2分钟

1. React-Native中的TailwindCSS的兼容

说明:我们先使用Taro在微信小程序中做了项目,然后项目大部分都是从PC页面移植,而PC都是采用了Tailwind CSS作为样式框架,所以为了不重新写样式减少工作量,所以想微信小程序转app(React-Native)的时候也使用Tailwind CSS从而可以保留绝大部分的样式。

  • 安装插件:twrnc

    以下是插件的一些优势

    • 兼容Tailwind Css v3 和 v2
    • 支持tailwind.config.js自定义配置
    • 平台支持:android:mt-4 ios:mt-2
    • 暗黑模式支持:bg-white dark:bg-black
    • 媒体查询支持:w-48 lg:w-64 min-w-[600px]:flex-wrap
    • 设备方向支持:portrait:flex-col landscape:flex-row
    • vw 和 vh 单位支持:h-screen, min-w-screen, w-[25vw]
    • retina设备像素密度支持:w-4 retina:w-2
    • 任意类型JIT支持:mt-[31px] bg-[#eaeaea] text-red-200/75

2. 一像素边框

在小程序里可以使用伪类元素实现,但是React-Native不支持,但是React-Native中有成熟的方案,即:

StyleSheet.hairlineWidth

3. 背景图

在小程序里可以使用 background-image 的css实现,但是React-Native里不支持,所以需要替换成React-Native的方案: ImageBackground 组件,类似于div+背景图片,使用方式和Image组件一样

4. A failure occurred while executing com.android.build.gradle.internal.tasks.MergeNativeLibsTask$MergeNativeLibsTaskWorkAction

最近发现(11.4号之后代码啥也没有改,在新的机器上跑不起来了「环境配置没有问题」)

> Task :react-native-community_geolocation:compileDebugJavaWithJavac

> Task :react-native-community_netinfo:compileDebugJavaWithJavac

> Task :expo:compileDebugKotlin FAILED
w: Detected multiple Kotlin daemon sessions at build/kotlin/sessions

Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

...

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':expo:compileDebugKotlin'.
> Compilation error. See log for more details

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 3s

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

...

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':expo:compileDebugKotlin'.
> Compilation error. See log for more details

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org

...

info Run CLI with --verbose flag for more details.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

那么在这里给你一些解决方案,少走几个小时的排查的弯路:

👉 1. stack overfolw 上的一些建议:stackoverflow.com/questions/7…

👉 2. 当然最终是React-Native官方背锅(11.4 开始出现):github.com/facebook/re…


PS: 后续有时间慢慢更新吧~