React native layout整理

下面的样式就是样式表中所有可用的属性。

<code class="hljs bash has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"alignItems"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"alignSelf"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"backfaceVisibility"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"backgroundColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderBottomColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderBottomLeftRadius"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderBottomRightRadius"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderBottomWidth"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderLeftColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderLeftWidth"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderRadius"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderRightColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderRightWidth"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderStyle"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderTopColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderTopLeftRadius"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderTopRightRadius"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderTopWidth"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"borderWidth"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bottom"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"color"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"flex"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"flexDirection"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"flexWrap"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontFamily"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontSize"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontStyle"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"fontWeight"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"height"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"justifyContent"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"left"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"letterSpacing"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"lineHeight"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"margin"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"marginBottom"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"marginHorizontal"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"marginLeft"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"marginRight"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"marginTop"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"marginVertical"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"opacity"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"overflow"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"padding"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"paddingBottom"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"paddingHorizontal"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"paddingLeft"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"paddingRight"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"paddingTop"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"paddingVertical"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"position"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"resizeMode"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"right"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"rotation"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"scaleX"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"scaleY"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"shadowColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"shadowOffset"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"shadowOpacity"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"shadowRadius"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"textAlign"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"textDecorationColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"textDecorationLine"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"textDecorationStyle"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"tintColor"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"top"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transform"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"transformMatrix"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"translateX"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"translateY"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"width"</span>,<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"writingDirection"</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li></ul>

边框宽度

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">borderBottomWidth <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//底部边框宽度</span>borderLeftWidth  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//左边边框宽度</span>borderRightWidth <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//右边边框宽度</span>borderTopWidth <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//顶部边框宽度</span>borderWidth  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//所有边框宽度</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

边框颜色

同边框宽度属性，属性值为字符串类型的rgb表示方式

<code class="hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">borderBottomColorborderLeftColorborderRightColorborderTopColorborderColor</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li></li></ul>

外边距

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">marginBottommarginLeftmarginRightmarginTopmarginVerticalmarginHorizontal<span class="hljs-attribute" style="box-sizing: border-box;">margin</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

值得注意的是marginVertical相当于同时设置marginTop和marginBottom，marginHorizontal相当于同时设置marginLeft和marginRight，margin相当于同时设置四个

内边距

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">paddingBottom  paddingLeft  paddingRight  paddingTop  paddingVerticalpaddingHorizontal  <span class="hljs-attribute" style="box-sizing: border-box;">padding</span> </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

背景色

背景色，属性值为字符串类型的rgb表示方式，可以设置‘transparent’之类的属性

<code class="hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">backgroundColor</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li></li></ul>

边框圆角

<code class="hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">borderTopLeftRadiusborderTopRightRadiusborderBottomLeftRadiusborderBottomRightRadiusborderRadius</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

宽高

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-attribute" style="box-sizing: border-box;">width</span> <span class="hljs-attribute" style="box-sizing: border-box;">height</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li></li></ul>

Flex布局相关

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-attribute" style="box-sizing: border-box;">flex</span> number flexDirection <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'row'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'column'</span>)</span> flexWrap <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'wrap'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'nowrap'</span>)</span> alignItems <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'flex-start'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'flex-end'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'stretch'</span>)</span> alignSelf <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'auto'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'flex-start'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'flex-end'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'stretch'</span>)</span> justifyContent <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'flex-start'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'flex-end'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'space-between'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'space-around'</span>)</span> </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li></li></ul>

字体相关属性

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-attribute" style="box-sizing: border-box;">color</span> 字体颜色fontFamily 字体族fontSize 字体大小fontStyle 字体样式，正常，倾斜等，值为<span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'normal'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'italic'</span>)</span>fontWeight 字体粗细，值为<span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"normal"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'bold'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'100'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'200'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'300'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'400'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'500'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'600'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'700'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'800'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'900'</span>)</span>letterSpacing 字符间隔lineHeight 行高textAlign 字体对齐方式，值为<span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"auto"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'left'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'right'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'center'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'justify'</span>)</span>textDecorationLine 貌似没效果，字体修饰，上划线，下划线，删除线，无修饰，值为<span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"none"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'underline'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'line-through'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'underline line-through'</span>)</span>textDecorationStyle <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"solid"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'double'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'dotted'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'dashed'</span>)</span> 貌似没效果，修饰的线的类型textDecorationColor 貌似没效果，修饰的线的颜色writingDirection <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"auto"</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ltr'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'rtl'</span>)</span> 不知道什么属性，写作方向？从左到右？从右到左？</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li></ul>

图片相关属性

<code class="hljs scss has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">resizeMode <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'cover'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'contain'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'stretch'</span>)</span><span class="hljs-attribute" style="box-sizing: border-box;">overflow</span> <span class="hljs-function" style="box-sizing: border-box;">enum(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'visible'</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'hidden'</span>)</span> 超出部分是否显示，<span class="hljs-value" style="box-sizing: border-box;">hidden</span>为隐藏tintColor 着色，rgb字符串类型<span class="hljs-attribute" style="box-sizing: border-box;">opacity</span> 透明度</code>

其中resizeMode 中的三个属性，contain是指无论如何图片都包含在指定区域内，假设设置的宽度高度比图片大，则图片居中显示，否则，图片等比缩小显示

图像变换

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;"><span class="hljs-label" style="box-sizing: border-box;">scaleX:</span>水平方向缩放<span class="hljs-label" style="box-sizing: border-box;">scaleY:</span>垂直方向缩放<span class="hljs-label" style="box-sizing: border-box;">rotation:</span>旋转<span class="hljs-label" style="box-sizing: border-box;">translateX:</span>水平方向平移<span class="hljs-label" style="box-sizing: border-box;">translateY:</span>水平方向平移</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

阴影

<code class="hljs  has-numbering" style="display: block; padding: 0px; background-color: transparent; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background-position: initial initial; background-repeat: initial initial;">shadowColorshadowOffsetshadowOpacityshadowRadius</code>