React Native随附了许多内置组件，您可以使用它们对跨平台应用程序进行样式设置。 样式化移动应用程序很重要。 我不能过分强调移动应用程序具有令人愉悦的设计和良好使用色彩的重要性。 如果没有完善的应用程序用户界面，则潜在的用户将因移动应用程序中缺乏设计而被排斥。 React Native使用普通的JavaScript进行样式设置。 在本教程中，您将通过获得一些动手经验和学习技巧，探索各种方式来设计React Native应用程序。
介绍
React Native使用JavaScript进行样式设置，如果您对Web的CSS有一定的经验，就会知道对组件进行样式设置无非是通过使用适当的样式编写语法来编写代码。 如果您不知道什么是CSS，我希望您在这里停下来，因为阅读本教程没有任何好处。 您需要了解一些CSS才能继续阅读下面的教程。 如果您了解backgroundColor: 'blue'含义，那么您就很好了。
React Native带有许多内置组件，每个组件都有其特定的样式集。 这些特定样式可能适用于也可能不适用于其他组件。 例如，“ Text组件支持fontWeight而“ View组件不支持。 但是，某些样式相似但不完全相同。 View支持shadowColor而Text支持textShadowColor 。 最后，您必须确保没有一些特定于平台的样式，例如shadowPropTypesIOS 。
设置React Native应用样式的不同方法
您可以通过多种方式将样式添加到React Native组件中。 第一个是内联样式 。 请参见下面的示例。
以上代码段代码的结果如下。
在我之前的2019年关于React Native入门的文章中，关于StyleSheet对象。 这是第二种方式。
通过导入和使用StyleSheet可从React Native API获得，您可以创建一个样式对象并分别引用每个样式。 这使样式与render方法分离，并帮助您组织代码。 此外，它还促进了组件之间的重用样式。
此代码段将对在移动设备上进行渲染产生相同的影响。 唯一更改的地方是使用StyleSheet对象将组件App内的样式分开。 它像上面一样使用JavaScript对象，并从中返回一个新的Stylesheet对象。 像Web开发一样，React Native中没有类或ID。 若要创建一个新的样式对象，请使用 StyleSheet.create() 方法。 该方法的另一个优点是，每次创建一个新的样式对象时， StyleSheet帮助创建一个具有ID的样式对象，该ID被进一步用于引用，而不是一次又一次地渲染整个组件。
样式封装
在React Native中，样式的作用域是组件而不是整个应用程序。 我们已经看到了一种定义React Native社区常用的样式的首选方法。 还有另一种方法来定义样式，以一种方式组织应用程序代码，以便在重构或应用程序开始变得庞大时更容易跟踪样式。 通过第二种方法，可以在单独的文件中声明与组件相关的所有样式。 然后将该样式文件导入组件文件中。 这是给你的例子。 在App.js旁边创建一个名为AppStyles.js的新文件。
下一步是将该文件导入App.js 。
该演示运行并产生与以前相同的结果。 除组件文件以外的文件中样式的这种分离具有其自身的优点。 它提高了其他样式对象的可重用性。
使用数组传递样式
在内联样式中，您必须已经观察到，它只是一个以style prop开头的对象，并且该对象通过键值对传递。 同样，您可以使用包含多个键值对的数组作为style道具的值。
以下是以上代码段的结果。
请注意，当存在重复的color属性时，传入的最后一个样式将覆盖以前的样式。
建立应用程式：深色/浅色主题
在本节中，您将构建一个称为亮/暗模式切换的简单应用。 它包含带有一些文本的按钮，该按钮具有自己的深色背景和浅色背景。 当用户单击按钮时，应用程序的背景将更改为暗模式，而按钮上的文本将更改为亮模式。
首先，让我们为其定义样式。 打开AppStyles.js外部样式文件。
这里发生了很多事情。 首先，在一个Colors对象中定义了两个不同的颜色变量。 然后，有两个不同的容器对象，一个用于背景，另一个用于按钮。 然后，这两个容器对象都在StyleSheet对象lightStyles和darkStyles内部重新使用。 同样，要定义背景色，我们可以重复使用颜色对象，这样就不必每次为每种颜色写两次值。
最后，有一个导出的函数，该函数根据布尔值返回主题。 如果返回其暗主题的真主题，则返回暗主题的值darkStyles 。
AppStyles.js文件是React Native应用程序中结构样式的清晰表示。 然后将此文件导入具有以下内容的App.js内。
通过定义状态，您可以将深色主题的默认值声明为false，例如，它允许浅色主题为默认值。 toggleTheme是一种方法，可以相应地反转深色主题的布尔值。 接下来，在render()内部，您将传递来自状态的深色主题的当前值。 然后，此函数用于基于布尔值应用正确的主题或样式集。
您可以在下面看到其实际效果。
您可以在下面的Github存储库中找到此示例的完整代码????
⚛️+????反应原生事物。 通过在… github.com 上创建一个帐户，为amandeepmittal / react-native-workspace开发做出贡献
我经常写Web技术，但是我主要关心的是在React Native上提供内容。 您可以在Medium上关注我，也可以订阅下面的每周新闻 ， 直接在收件箱中接收我的所有教程 ????
From: https://hackernoon.com/styling-the-react-native-way-3cc6d3ef52d0