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: 后续有时间慢慢更新吧~