基于组件的库和框架（如React、Angular和Vue）的引入，导致了CSS-in-JS造型技术的应用增长。CSS-in-JS让我们
- 使用JavaScript编译CSS，这样我们就可以将CSS抽象到组件级别了
- 利用JavaScript的力量，以一种更加声明性和可维护的方式来描述样式。
CSS-in-JS最流行的实现之一是styled-components，这个库使我们能够创建具有本地样式的组件。
在这篇文章中，我们将专注于使用styled-components和Styled System为React Native应用设计样式，Styled System是一个实用优先的样式库，与CSS-in-JS库协同工作。
先决条件。
要跟上进度，你需要具备以下条件。
- 具有CSS的工作知识
- 对React和React Native的工作知识
CSS-in-JS
在开始学习本教程之前，让我们先了解一下CSS-in-JS的一些背景，并看看它的一些优点。首先，CSS-in-JS使我们能够解决CSS问题，如名称碰撞，这是由使用JavaScript时的全局命名间距引起的。CSS-in-JS还允许我们使用正常的CSS命名约定，而不是React Native中使用的camelCase，例如，backgroundColor 是background-color 。
使用CSS-in-JS与库集成（如styled-components）还有一些额外的好处，特别是对于移动应用程序。
Styled-components允许我们使用CSS属性，如媒体查询和伪类的内联。在React Native中不可能用普通的内联CSS来使用这些。我们可以通过从本地模块styled-components/native 中导入组件来获得本地移动支持。
构建我们的应用程序
让我们开始设计我们的React Native应用程序的风格。按照下面的步骤，使用Styled System向React组件添加style props。
使用Expo CLI创建一个新的React Native应用程序。
# Install the expo command line tool
npm install --global expo-cli
# bootstrap a new project
expo init <-- your app name -->
## cd <-- your app name -->
安装依赖项。
npm install styled-system styled-components
上面的代码片段同时安装了Styled System和styled-components。
启动你的应用程序。
#Expo
expo start
# you can not run and Android or iOS emulator to view your application
现在，你应该得到一个像下面这样的启动程序。
Styled System为我们提供了一组名为style functions 的函数，为我们的组件添加style 道具。这些style props为我们的React Native组件提供了内联样式。
import styled from 'styled-components/native'
import { color } from 'styled-system'
const Card = styled.View`
${color}
`
export default Card
上面的代码从Styled System中导入了color 函数，并将其添加到卡片组件中，将bg 和color 样式道具映射到卡片组件中。请看下面这些道具是如何使用的。
...
<Card color="#FFFFFF" bg="black">
<Text>Hello World!</Text>
</Card>
...
现在你应该收到一个像下面这样的输出。
样式系统有一个非常丰富的API，包括大多数CSS属性的函数。每个函数都提供了一组style 的道具。当函数被添加到组件中时，style 道具也被映射到组件中。
style props使用类似于Bootstrap和Tailwind CSS中的速记语法，便于快速制作UI原型，并在整体上获得良好的开发体验。
为了详细说明这一点，让我们给我们的例子添加更多的代码。
import styled from 'styled-components/native'
import { color, space, layout, position, border, flexbox } from 'styled-system'
const Card = styled.View`
${color}
${space}
${layout}
${position}
${border}
${flexbox}
`
export default Card
正如你所看到的，我为卡片组件添加了更多的style 函数，这也映射了更多的style 道具。Flexbox函数将flex属性作为style props添加到我们的组件。其他的style 函数也做了同样的事情，使我们的组件具有丰富的style 道具集合。
接下来，创建一个像下面这样的文本组件。
import styled from 'styled-components/native'
import { color, space, typography } from 'styled-system'
const Title = styled.Text`
${color}
${space}
${typography}
`
export default Title
这段代码为我们提供了一个可重复使用的文本组件，并有多个造型选项。
import React from 'react';
import Title from './component/Text';
import Card from './component/Card'
const App = () => {
return (
<Card
width={"100%"}
height={"100%"}
alignItems={"center"}
justifyContent={"center"}
>
<Card
color="#fff"
width={400}
height={400}
alignItems={"center"}
justifyContent={"center"}
bg="tomato" p={6}
>
<Title fontSize={20} fontWeight={'bold'}>Hello World</Title>
</Card>
</Card>
);
}
export default App;
从上面的代码中，我们可以看到，我们可以重复使用具有不同风格的卡片和文本组件来满足我们的布局需求。这对于快速的UI原型设计是非常好的。
你的React Native应用现在应该看起来像下面的图片。
现在，让我们通过建立一个Notification layout ，把所有东西放在一起。
设计我们的布局
components folder 现在我们已经使用Expo CLI启动了一个新的React Native应用程序，在root directory ，用这三个文件创建一个Notifications.js ，Card.js ，和Text.js 。
将下面的代码添加到我们的Card.js 文件中。
import styled from 'styled-components/native'
import { color, space, layout, position, border, flexbox } from 'styled-system'
const Card = styled.View`
${color}
${space}
${layout}
${position}
${border}
${flexbox}
`
export default Card
现在，将下面的代码添加到我们的Text.js 文件中。
import styled from 'styled-components/native'
import { color, space, typography } from 'styled-system'
const Title = styled.Text`
${color}
${space}
${typography}
`
export default Title
到目前为止，还没有什么新的东西。接下来，将下面的代码添加到Header.js 文件中。
import React from 'react';
import Title from './Text';
import Card from './Card';
const Header = ({title}) => {
return (
<Card
width={400}
height={150}
alignItems={"center"}
justifyContent={"center"}
bg={"#36b8c9"}
mb={3}
py={6}
px={4}
>
<Title fontSize={25} fontWeight={'bold'} color={"#FFFFFF"}>{title}</Title>
</Card>
);
}
export default Header;
我们的App.js 文件现在应该看起来像这样。
import React from 'react';
import Card from './component/Card';
import Header from "./component/Header.js";
const App = () => {
return (
<Card width={"100%"} height={"100%"} bg={"#efefef"}>
<Header title="Notification" />
</Card>
);
}
export default App;
现在，我们的应用程序看起来像这个截图。
接下来，我们将把下面的代码添加到Notification.js 文件中。
import React from 'react';
import Title from './Text';
import Card from './Card'
const Notification = ({ status, message }) => {
return (
<Card
width={"100%"}
height={"auto"}
alignItems={"center"}
justifyContent={"center"}
bg={"#FFFFFF"}
my={2}
px={4}
py={3}
>
<Title
fontSize={25}
fontWeight={'bold'}
color={status === "success" ? "#36b8c9" : "#f6244d"}
mb={2}
>
{message}
</Title>
<Card
flexDirection={"row"}
justifyContent={"space-between"}
width={"100%"}
>
<Title fontSize={16} color={"#36b8c9"}>2020-09-4</Title>
<Title fontSize={16} color={"#36b8c9"}>9:20</Title>
</Card>
</Card>
);
}
export default Notification;
上面的代码创建了一个可重复使用的Notification component ，它需要两个道具，即status 和message 。status 道具是用来根据订单的状态有条件地设计我们的文本。
color={status === "success" ? "#36b8c9" : "#f6244d"}
message prop 在视图中显示通知信息。我们可以在我们的App.js 文件中使用message prop 来获得我们的最终视图。
import React from 'react';
import Card from './component/Card';
import Header from "./component/Header.js";
import Notification from "./component/Notification";
const App = () => {
return (
<Card
width={"100%"}
height={"100%"}
bg={"#efefef"}
>
<Header title="Notification" />
<Notification
status="success"
message="your order was successfully accepted!"
/>
<Notification
status="success"
message="your order was successfully accepted!"
/>
<Notification message="your order was not accepted!" />
</Card>
);
}
export default App;
构建可重复使用的组件使我们的代码变得干净和DRY 。通过使用Styled System创建可重用的组件，我们为每个组件提供了访问由style 函数传递给它的必要的style 道具。
因此，我们可以通过使用这些道具来操作组件的显示，轻松地建立我们的布局。与React Native风格的对象相比，我们的代码更容易阅读和维护。
我们最终的应用程序应该是这样的。
用风格化的系统做标题
最后，需要注意的是，Styled System也支持使用主题。让我们创建一个theme.js 文件，其中包含一个定义我们所有样式的对象。我们将使用theme.js 文件与大多数CSS-in-JS库通过context 提供的ThemeProvider 。
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'
const App = props => (
<ThemeProvider theme={theme}>{/* application elements */}</ThemeProvider>
)
export default App
我们所有嵌套在ThemeProvider 中的组件都可以访问我们在theme object 中定义的样式。这使得我们的样式更加一致和可维护。
总结
风格化系统是很好的。它不仅能让我们快速地制作UI原型，而且还能与几个CSS-in-JS库（如styled-components）一起使用。
Styled System是一种革命性的React Native组件的造型方式，它使用了一种简单的方法。我们通过向组件传递Style functions ，添加用于为组件提供内联样式的style props。毫无疑问，Styled System是构建React Native布局的一个好方法。我希望你已经准备好在你的下一个项目中尝试它了!
The postBuilding React Native applications with Styled Systemappeared first onLogRocket Blog.
