From c00c8f376a1d18eb560ca8a073e43104dffeafe2 Mon Sep 17 00:00:00 2001 From: Pines-Cheng Date: Mon, 29 Jul 2019 15:44:12 +0800 Subject: [PATCH] docs: update docs --- docs/GETTING-STARTED.md | 35 +++++++++++++++++++++++++++++++++++ docs/README.md | 3 +++ 2 files changed, 38 insertions(+) diff --git a/docs/GETTING-STARTED.md b/docs/GETTING-STARTED.md index b9e0d072607c..ded38f8ed0df 100644 --- a/docs/GETTING-STARTED.md +++ b/docs/GETTING-STARTED.md @@ -237,6 +237,41 @@ $ taro build --type rn --watch # npx 用户也可以使用 $ npx taro build --type rn --watch ``` +> Note:React Native 端和其他端样式兼容性差异较大,如果需要兼容 React Native 端,建议 React Native 端和其他端同步开发。 + +> Note:如果要支持 React Native 端,必须采用 Flex 布局,并且样式选择器仅支持类选择器,且不 +支持 **组合器** [Combinators and groups of selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Combinators_and_multiple_selectors)。 + +以下选择器的写法都是不支持的,在样式转换时会自动忽略。 + +```css +.button.button_theme_islands{ + font-style: bold; +} + +img + p { + font-style: bold; +} + +p ~ span { + color: red; +} + +div > span { + background-color: DodgerBlue; +} + +div span { background-color: DodgerBlue; } + +``` + +样式上 H5 最为灵活,小程序次之,RN 最弱,统一多端样式即是对齐短板,也就是要以 RN 的约束来管理样式,同时兼顾小程序的限制,核心可以用三点来概括: + +- 使用 Flex 布局 +- 基于 BEM 写样式 +- 采用 style 属性覆盖组件样式 + +RN 中 View 标签默认主轴方向是 column,如果不将其他端改成与 RN 一致,就需要在所有用到 display: flex 的地方都显式声明主轴方向。 ## 更新 diff --git a/docs/README.md b/docs/README.md index d7a4fa33f867..eb1d6f484ba2 100644 --- a/docs/README.md +++ b/docs/README.md @@ -109,3 +109,6 @@ Taro 方案的初心就是为了打造一个多端开发的解决方案。目前 [awesome-taro](https://github.com/NervJS/awesome-taro) 掘金小册:[Taro 多端开发实现原理与实战](https://juejin.im/book/5b73a131f265da28065fb1cd?referrer=5ba228f16fb9a05d3251492d) + +## 开发交流 +![image](https://camo.githubusercontent.com/519861ac48c204c6038cea71ea10e1d991f36163/68747470733a2f2f696d6733302e333630627579696d672e636f6d2f6c696e672f6a66732f74312f38313133312f31332f3730302f33353431312f35636566343339664538616366366163342f323331393531336663303734303465362e706e67)