From 41287efa5a2b412cf8ef9c13c910e5e24bed4ddd Mon Sep 17 00:00:00 2001
From: zoomchan-cxj <zoom_chan@163.com>
Date: Thu, 20 Jan 2022 17:04:20 +0800
Subject: [PATCH] chore(style): add tintColor demo & docs

---
 docs/hippy-vue/external-components.md                |  2 +-
 docs/style/appearance.md                             | 12 ++++++++++++
 docs/style/layout.md                                 |  2 ++
 .../hippy-react-demo/src/components/Image/index.jsx  |  7 +++++++
 .../hippy-vue-demo/src/components/demos/demo-img.vue | 10 ++++++++++
 5 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/docs/hippy-vue/external-components.md b/docs/hippy-vue/external-components.md
index a2f9bf799..4c0dab9ab 100644
--- a/docs/hippy-vue/external-components.md
+++ b/docs/hippy-vue/external-components.md
@@ -157,7 +157,7 @@
 
 ### collapsePullHeader
 
-`() => void` 收起顶部刷新条 `<pull-header>`。
+`() => void` 收起顶部刷新条 `<pull-header>`。当使用了`pull-header`后，每当下拉刷新结束需要主动调用该方法收回 pull-header。
 
 ---
 
diff --git a/docs/style/appearance.md b/docs/style/appearance.md
index 40c49f82e..e59a8c195 100644
--- a/docs/style/appearance.md
+++ b/docs/style/appearance.md
@@ -270,6 +270,18 @@
 | ------ | -------- | --------|
 | number | 否 | 双平台支持 |
 
+# tintColor
+
+[Hippy-React 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-react-demo/src/components/Image/index.jsx)
+
+[Hippy-Vue 范例](https://github.com/Tencent/Hippy/blob/master/examples/hippy-vue-demo/src/components/demos/demo-img.vue)
+
+对图片进行染色（iOS暂不支持透明度）
+
+| 类型               | 必需 | 支持平台
+| ------------------ | -------- | --- |
+| [color](style/color.md) | 否  |  All
+
 # visibility
 
 | 类型   | 必需 | 支持平台
diff --git a/docs/style/layout.md b/docs/style/layout.md
index 01757af9b..595bf68b3 100644
--- a/docs/style/layout.md
+++ b/docs/style/layout.md
@@ -363,6 +363,8 @@ Hippy 默认采用 Flex 布局。同时，因为仅支持 Flex 布局，所以
 
 `overflow` 定义了子元素超过父容器宽高度后的显示情况 `overflow: hidden` 的情况会导致子元素被父容器切割超出显示范围的部分 `overflow: visible` 会让子容器正常显示全部，即使超出父容器的显示范围。
 
+!> 由于历史原因，Android 默认全部元素为 `overflow: hidden`, iOS 为 `overflow: visible`
+
 | 类型                                | 必需 |
 | ----------------------------------- | -------- |
 | enum('visible', 'hidden') | 否       |
diff --git a/examples/hippy-react-demo/src/components/Image/index.jsx b/examples/hippy-react-demo/src/components/Image/index.jsx
index 39bfc30fc..d6b1bf8fa 100644
--- a/examples/hippy-react-demo/src/components/Image/index.jsx
+++ b/examples/hippy-react-demo/src/components/Image/index.jsx
@@ -71,6 +71,13 @@ export default function ImageExpo() {
         source={{ uri: imageUrl }}
         resizeMode={Image.resizeMode.center}
       />
+      <Text style={styles.info_style}>TintColor(iOS染色暂不支持透明度)</Text>
+      <Image
+        style={[styles.image_style, { tintColor: '#99999955' }]}
+        defaultSource={defaultSource}
+        source={{ uri: imageUrl }}
+        resizeMode={Image.resizeMode.center}
+      />
       <Text style={styles.info_style}>Cover GIF:</Text>
       <Image
         style={[styles.image_style]}
diff --git a/examples/hippy-vue-demo/src/components/demos/demo-img.vue b/examples/hippy-vue-demo/src/components/demos/demo-img.vue
index e9bbdcf8d..d6006b267 100644
--- a/examples/hippy-vue-demo/src/components/demos/demo-img.vue
+++ b/examples/hippy-vue-demo/src/components/demos/demo-img.vue
@@ -22,6 +22,12 @@
         src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
         class="image center"
       >
+      <label>TintColor(iOS染色暂不支持透明度):</label>
+      <img
+        :placeholder="defaultImage"
+        src="https://user-images.githubusercontent.com/12878546/148736102-7cd9525b-aceb-41c6-a905-d3156219ef16.png"
+        class="image center tint-color"
+      >
       <label>Gif:</label>
       <img
         :placeholder="defaultImage"
@@ -91,4 +97,8 @@ export default {
 #demo-img .center {
   resize-mode: center;
 }
+
+#demo-img .tint-color {
+  tint-color: #99999955
+}
 </style>