React Native 是一种基于 JavaScript 的框架，可以用来开发跨平台原生应用。与 Web 开发不同的是，React Native 使用的是 Flexbox 布局，而不是 CSS 布局。因此，在开发 React Native 应用时，Web 开发者需要注意一些常见的 CSS 差异。
相对单位
Web 开发中常见的相对单位有 rem、em、vh、vw 等。然而在 React Native 中，只支持 dp 和百分比单位。
dp：设备独立像素，类似于 Web 开发中的像素（px）。- 百分比：相对于父容器的宽度或高度。
示例代码：
-- --- ------ ------------ --
---------- -
---------- -----
------ -----
------- ------
-------- ----
-
-- ----- ------ ---- --------
----- ------ - -------------------
---------- -
--------- ---
------ ------
------- ------
-------- ---
--
---盒模型
Web 开发中，一个元素的宽度和高度是包括内边距和边框的总宽度和高度。而在 React Native 中，只有元素的内容区域有宽度和高度，内边距和边框不会影响元素的大小，需要使用 borderWidth 和 padding 来设置。
示例代码：
-- --- --------- ----- --------------------- -----
------ -
------ ------
-------- -----
------- --- ----- ------
-
-- ----- ------ ------- ----- ----------------- ----- --
----- ------ - -------------------
------- -
------ ----
-------- ---
------------ --
------------ --------
--
---浮动和清除浮动
Web 开发中，float 属性可以使元素浮动到左边或右边，但需要使用 clear 属性来清除浮动。而在 React Native 中，没有浮动和清除浮动的概念，可以使用 Flexbox 来实现。
示例代码：
-- --- ---------------- ----- ------
------ -
------ -----
------ ----
-
------ -
------ -----
-
-- ----- ------ ----- ---- --------- ------------- - -------- -----
----- ------ - -------------------
---------- -
-------------- ------
--
------ -
------ ------
--
------ -
-------------- ---------
--
---定位
在 Web 开发中，可以使用 position 属性来设置元素的定位方式，如 static、 relative、 absolute 和 fixed。而在 React Native 中，也支持这些定位方式，不过需要使用特定的属性来设置。
示例代码：
-- --- ------- -------- -------- --------------- - ----- --
--------- -
--------- ---------
---- -----
------ -----
-
-- ----- ------ ----- -------- -------- ------------------------ - ----- --
----- ------ - -------------------
--------- -
--------- -----------
---- ---
------ ---
--
---图片的大小和位置
Web 开发中，图片元素的大小和位置可以通过 width、height、margin 和 padding 属性来设置。而在 React Native 中，图片的大小和位置需要使用 flex 属性和 resizeMode 属性来设置。
flex属性：用于设置图片元素的大小和位置，不同于 Web 开发中的flexbox布局。resizeMode属性：用于指定图片的填充方式，包括contain、cover、stretch等。
示例代码：
-- --- --------------
--- -
------ ------
------- ------
------- -----
-------- -----
-
-- ----- ------ ---- ---- --- ---------- -------------
----- ------ - -------------------
------ -
----- --
------- ---
-------- ---
----------- ----------
--
---结论
在 React Native 中，使用 Flexbox 布局来实现界面的设计，与 Web 开发的 CSS 布局有很大的不同。Web 开发者需要注意一些常见的差异，并使用相应的解决方案来调整布局。同时，还需要适当地使用 React Native 提供的样式属性来实现界面的布局和设计，以获得更好的用户体验和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672db465eedcc8a97c85b12f