react native基础—2.使用样式

小咪咪 2024-04-19 15:06 4阅读 0赞

> 在 React Native 中，我们仍然是使用 JavaScript 来写样式。
> 
> 接受名为`style`的属性，只是按照 JS 的语法要求使用了驼峰命名法，例如将`background-color`改为`backgroundColor`。

### **1.样式的三种写法** ###

**`1.style`属性是一个普通的 JavaScript 对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

**`2.style`属性是一个数组（在数组中位置居后的样式对象比居前的优先级更高） **

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

**3.建议使用`StyleSheet.create`来集中定义组件的样式**

同样，后面的样式会覆盖前面的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

### 2.注意事项 ###

在react native里面写margin: 25 25 25(上 左右 下)  或者（上右下左）会报错

不过它提供了marginHorizontal(水平方向)marginVertical(垂直方向)

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/6e448068c5164983848c9b7ea1763b60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d1b803ba1b794b9e90d83e240f7fc75e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2ba4f0e4cb0b43b59903db3028948c65.png

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关 react native基础—2.使用样式

在 React Native 中，我们仍然是使用 JavaScript 来写样式。 > > 接受名为`style`的属性，只是按照 JS 的语法要求使用了驼峰命名法，...

小咪咪/ 2024年04月19日 15:06/ 0 赞/ 5 阅读

相关使用react-native基础环境搭建

Android Studio开发window环境搭建 Android 开发环境搭建下载jdk > 在这里你可以点击 [\[链接][Link 1] \]

Myth丶恋晨/ 2022年10月01日 08:45/ 0 赞/ 113 阅读

相关 React-Native 安装使用

React-Native 安装使用 1、首先运行 cmd +r ，输入： @powershell -NoProfile -ExecutionPolicy B

Love The Way You Lie/ 2022年07月16日 15:14/ 0 赞/ 113 阅读

相关 React Native中样式表中的一些样式属性

1、属性在React Native中，和布局有关的，就是css样式，那么一个View可以设置哪些css样式呢，是和web中的css样式完全一样呢，还是有所不同呢？其实你

曾经终败给现在/ 2022年06月12日 07:12/ 0 赞/ 318 阅读

相关最全react native样式

刚刚尝试了下一个样式，发现不可用，结果给出可用的css样式，那我就放下面吧 ![SouthEast][] ![SouthEast 1][] ![SouthEa

落日映苍穹つ/ 2022年05月31日 02:57/ 0 赞/ 120 阅读

相关 react-native样式定义使用StyleSheet

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

忘是亡心i/ 2022年05月25日 13:18/ 0 赞/ 161 阅读

相关 React Native——react-navigation的使用

在 `React Native` 中，官方已经推荐使用 `react-navigation` 来实现各个界面的跳转和不同板块的切换。 `react-navigation` 主

向右看齐/ 2022年05月23日 05:42/ 0 赞/ 136 阅读

相关 react-native实现字符串样式分割组件

react-native-string-distinction react-native-string-distinction,divide the character

╰+攻爆jí腚メ/ 2022年05月22日 06:24/ 0 赞/ 147 阅读

相关 React Native 样式表指南

React Native 的样式基本上是实现了 CSS 的一个子集，针对 iOS、Android 阉割了一些功能，并且部分属性名不完全一致，下面是 React Native 所

你的名字/ 2022年03月06日 02:20/ 0 赞/ 209 阅读

相关初学react native基础（组件、API、插件、样式、布局）

React Native > React Native 看起来很像 React，只不过其基础组件是原生组件而非 web 组件。要理解 React Native 应用的基本

淩亂°似流年/ 2022年01月25日 17:11/ 0 赞/ 272 阅读