在 UIExploerer应用程序里面，加载了一个标准的React Native 的示例，并且允许您浏览所有支持的界面元素。 强烈推荐您去检查包含在 UIExplorer 应用中的各种元素。 该应用同时也展示了很多的样式选项以及交互。

由于各种不同的平台之间，这些组件差别很大。所以当您使用React Native 做开发时，如何搭建各种React 的组件就显得特别重要了。在使用 React 做网站开发时，我们经常会使用的一个混合的 React 组件：一些管理逻辑和他们的子控件，而其它的一些组件是通过渲染原始的标签生成的。 如果您打算在React Native 复用这些代码，分别维护这两种不同类型的组件就很重要。 利用 React 组件渲染生成的 元素显然是不能在Android平台里面使用了。然而，对于封装了联合逻辑的组件都是可以被复用的。 因些，基于视图的组件都是可以在不同的平台之间交换使用的。

样式化原生的视图

网页上，我们是通过使用CSS 来样式化 React 的组件， 就象我们过去所处理的任何一种HTML 元素。 不管您喜不喜欢， CSS都是网站开发中必不可少的一部分。 React 通常不会影响到我们写CSS 的方式。 相反他通过在行内直接样式化使用让 CSS的使用更加简单， 同时基于 props 和 state 两个参数动态创建类名， 但另一方面，React 组件在我们处理网页的样式时是不可预见的。

非网页平台有很多方法做布局和样式。 我们在使用 React Native 时，感谢上帝，我们可以使用一个标准的方式来样式化。 在 React 和宿主平台之间的桥部分包含了做了很多修剪的 CSS 子集的使用。 这部分简化了的CSS 布署主要依赖 flexbox 做布局规则，更关注于简约，而不是全面的包含所有的CSS样式规则。 不象网站， CSS 包含了不同平台浏览器的各种规则， React Native 可以强制实行所支持的样式的一贯性。 对于大多数的界面元素，您可以在 UIExplorer 应用程序中看到更多支持的样式例子。

React Native  同时也坚持使用行内的样式方式，这规则被JavaScript 的对象采用，而不象一般网页的单独的样式表文件。 React 小组已经在使用 React 做为网站应用程序之时就强力鼓吹这种方式。 在移动端， 这方式感觉更加自然些。 如果您已经很熟悉使用React 的行内样式表方式，那下面的语法对你来说一定不陌生。

// Define a style…

var style = {

backgroundColor: ‘white’,

fontSize: ‘16px’

}

React Native 也同时为我们提供一些工具帮助创建和扩展样式对象，以帮助我们管理行内样式的使用流程。 我们将晚点关注这些工具。

这种行内样式是否看着让您感到很怯？如果您有网页开发的背景，不得不承认这和您以前的标准工作方式有很大不同。 在要给对象做样式之时，和采用样式表不同，您需要做一些思维方式的调整，改变您以往的写样式表的方式。 但，对于在React Native 的语境之下，这是很有用的切换。 我们也会在稍晚再讨论样式的最好练习以及工作流。只是当您看到这种使用方式的时候，尽量保持不吃惊就好。(11.17 7878)