From 54257fd527695c707449ab5be40abc7f80e7ea56 Mon Sep 17 00:00:00 2001
From: wushuwang <wushuwang@h-partners.com>
Date: Wed, 5 Jun 2024 17:07:51 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=20[Issues:=20#I9KQRM]=20=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9react-native-material-design-style=E6=8C=87=E5=AF=BC?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 zh-cn/react-native-material-design-style.md | 120 ++++++++++----------
 1 file changed, 62 insertions(+), 58 deletions(-)

diff --git a/zh-cn/react-native-material-design-style.md b/zh-cn/react-native-material-design-style.md
index 88ce5f56..4c75589a 100644
--- a/zh-cn/react-native-material-design-style.md
+++ b/zh-cn/react-native-material-design-style.md
@@ -41,69 +41,73 @@ yarn add react-native-material-design-styles@0.2.7
 下面的代码展示了这个库的基本使用场景：
 
 
-#### **Typography**
+
 
 ```js
-import { StyleSheet } from 'react-native';
+import { StyleSheet, Text, View, ScrollView } from 'react-native';
 import { typography, color } from 'react-native-material-design-styles';
-
 const typographyStyle = StyleSheet.create(typography);
 const colorStyle = StyleSheet.create(color);
-
-<Text style={[typographyStyle.paperFontHeadline, colorStyle.paperTeal500]}>Typography</Text>
-<Text style={[typographyStyle.paperFontDisplay4]}>Display4</Text>
-<Text style={typographyStyle.paperFontDisplay3}>Display3</Text>
-<Text style={typographyStyle.paperFontDisplay2}>Display2</Text>
-<Text style={typographyStyle.paperFontDisplay1}>Display1</Text>
-<Text style={typographyStyle.paperFontHeadline}>Headline</Text>
-<Text style={typographyStyle.paperFontTitle}>Title</Text>
-<Text style={typographyStyle.paperFontSubhead}>Subhead</Text>
-<Text style={typographyStyle.paperFontBody2}>Body2</Text>
-<Text style={typographyStyle.paperFontBody1}>Body1</Text>
-<Text style={typographyStyle.paperFontCaption}>Caption</Text>
-<Text style={typographyStyle.paperFontButton}>Button</Text>
-<Text style={typographyStyle.paperFontCode2}>Code2</Text>
-<Text style={typographyStyle.paperFontCode1}>Code1</Text>
-```
-#### **Color**
-```js
-import { StyleSheet } from 'react-native';
-import { color } from 'react-native-material-design-styles';
-const typographyStyle = StyleSheet.create(typography);
-
-<Text style={[typographyStyle.paperFontHeadline, colorStyle.paperTeal500]}>Text Color</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink500]}>paperPink500</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink50]}>paperPink50</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink100]}>paperPink100</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink200]}>paperPink200</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink300]}>paperPink300</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink400]}>paperPink400</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink500]}>paperPink500</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink600]}>paperPink600</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink700]}>paperPink700</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink800]}>paperPink800</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink900]}>paperPink900</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA100]}>paperPinkA100</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA200]}>paperPinkA200</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA400]}>paperPinkA400</Text>
-<Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA700]}>paperPinkA700</Text>
-```
-#### **Using for background or other ways**
-```js
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue500.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue50.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue100.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue200.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue300.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue400.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue500.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue600.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue700.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue800.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlue900.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlueA200.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlueA400.color}]}></View>
-<View style={[styles.colorItem,{backgroundColor: color.paperBlueA700.color}]}></View>
+export function MetailDesignColor() {
+    return (
+        <View style={{ flex: 1, backgroundColor: "#fff" }}>
+            <ScrollView>
+                <Text style={[typographyStyle.paperFontHeadline, colorStyle.paperTeal500]}>Typography</Text>
+                <Text style={[typographyStyle.paperFontDisplay4]}>Display4</Text>
+                <Text style={typographyStyle.paperFontDisplay3}>Display3</Text>
+                <Text style={typographyStyle.paperFontDisplay2}>Display2</Text>
+                <Text style={typographyStyle.paperFontDisplay1}>Display1</Text>
+                <Text style={typographyStyle.paperFontHeadline}>Headline</Text>
+                <Text style={typographyStyle.paperFontTitle}>Title</Text>
+                <Text style={typographyStyle.paperFontSubhead}>Subhead</Text>
+                <Text style={typographyStyle.paperFontBody2}>Body2</Text>
+                <Text style={typographyStyle.paperFontBody1}>Body1</Text>
+                <Text style={typographyStyle.paperFontCaption}>Caption</Text>
+                <Text style={typographyStyle.paperFontButton}>Button</Text>
+                <Text style={typographyStyle.paperFontCode2}>Code2</Text>
+                <Text style={typographyStyle.paperFontCode1}>Code1</Text>
+
+                <Text style={[typographyStyle.paperFontHeadline, colorStyle.paperTeal500]}>Text Color</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink500]}>paperPink500</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink50]}>paperPink50</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink100]}>paperPink100</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink200]}>paperPink200</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink300]}>paperPink300</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink400]}>paperPink400</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink500]}>paperPink500</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink600]}>paperPink600</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink700]}>paperPink700</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink800]}>paperPink800</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPink900]}>paperPink900</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA100]}>paperPinkA100</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA200]}>paperPinkA200</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA400]}>paperPinkA400</Text>
+                <Text style={[typographyStyle.paperFontTitle, colorStyle.paperPinkA700]}>paperPinkA700</Text>
+
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue500.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue50.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue100.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue200.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue300.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue400.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue500.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue600.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue700.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue800.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlue900.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlueA200.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlueA400.color }]}></View>
+                <View style={[styles.colorItem, { backgroundColor: color.paperBlueA700.color }]}></View>
+            </ScrollView>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    colorItem: {
+        height: 50
+    }
+})
 ```
 
 
-- 
Gitee