React Native中的简单样式

I recently experimented with a side project using React Native. As a Front-End Developer I am familiar with React and was interested in discovering the similarities and differences between the platforms. Most of the differences didn’t bother me, except for one that I couldn’t get past — Styling in React Native.

我最近使用React Native进行了一个附带项目的实验。 作为前端开发人员，我熟悉React，并且对发现平台之间的异同很感兴趣。 大多数差异并没有让我感到困扰，除了一个我无法逾越的差异-React Native中的样式。

React Native encourages you to use their StyleSheet API that looks a bit like this:

React Native鼓励您使用看起来像这样的StyleSheet API ：

const Home = () => {
    return (
        <View style={styles.container}>
            <Text style={styles.heading}>Heading goes here</Text>
        </View>
    )
}const styles = StyleSheet.create({
    container: {
        display: 'flex',
        alignItems: 'center'
    },
    heading: {
        textTransform: 'uppercase'    
    }
})

This is a fairly standard CSS-in-JS pattern, but it’s also one that involves a significant trade-off. The double-edged sword of component scoped CSS is that although you don’t need to worry about the CSS cascade you’re also doomed to writing the same CSS declarations over and over again in each component. Imagine how many times you might require uppercase text in an application — Probably quite a lot. In vanilla CSS this is solved by making a helper class in a global CSS file. Something like this:

这是一个相当标准CSS-in-JS模式，但它也涉及重大的取舍。 组件作用域CSS的双刃剑是，尽管您不必担心CSS级联，但注定要在每个组件中一次又一次地编写相同CSS声明。 想象一下，在一个应用程序中可能需要多少次大写文本-可能很多。 在普通CSS中，这可以通过在全局CSS文件中创建一个帮助器类来解决。 像这样：

.uppercase {
    text-transform: 'uppercase'
}

This approach is one favoured by Tailwind CSS, Tachyons, and (to an extent) Bootstrap. Utility classes like this only need to be declared once but are reusable wherever you need them. This approach, however, is not possible using scoped CSS.

Tailwind CSS ， Tachyons和(在一定程度上) Bootstrap都偏爱这种方法。 这样的实用程序类只需要声明一次，但是可以在任何需要的地方重用。 但是，使用范围限定CSS无法实现这种方法。

This is the point where you might wonder:

这是您可能想知道的地方：

But can’t I just make helper classes like this in React Native and import them?

但是我不能在React Native中像这样创建帮助器类并导入它们吗？

And yes, you can. However it still isn’t all that helpful. You will still need to run the StyleSheet.create() method for each component, except now you’ve also got to manage a heap of imports. Consider for a moment how poorly this scales, particularly for a component that requires a lot of styling.

是的，您可以。 但是，它仍然不是那么有用。 您仍然需要为每个组件运行StyleSheet.create()方法，除了现在您还必须管理大量导入。 暂时考虑一下这种缩放的可伸缩性，尤其是对于需要大量样式的组件而言。

import { flexCenter, bold, uppercase, alignCenter, pb2, underline, textRight } from "./styles/helperStyles"

This is not a satisfactory solution. By solving one problem (repeating style declarations) another problem is created (import hell).

这不是令人满意的解决方案。 通过解决一个问题(重复样式声明)，创建了另一个问题(导入地狱)。

解决方案： (The Solution:)

My goal was to find a styling solution that:

我的目标是找到一种样式解决方案：

1. Prevents duplication of style declarations;
   防止样式声明重复；
2. Provides a good developer experience (not too much boilerplate or importing)
   提供良好的开发人员体验(不要过多地重复或导入)
3. Maintains good performance.
   保持良好的性能。

Introducing my first NPM package… React Native Simple Styles. 🎉

介绍我的第一个NPM软件包…React Native Simple Styles。 🎉

NPM: React Native Simple StylesGithub: React Native Simple Styles

NPM： React本机简单样式 Github： React本机简单样式

Here’s my pitch!

这是我的球场！

React本机简单样式 (React Native Simple Styles)

Not everyone wants to write scoped CSS. This package allows you to write CSS that:

并非每个人都想编写作用域CSS。 该软件包允许您编写CSS：

• All lives in the one file;
  所有生活在一个文件中；
• Is applied using a classNames prop (similar to React);
  使用classNames属性(类似于React)应用；
• Is compatible with an atomic CSS approach;
  与原子CSS方法兼容；
• Doesn’t need to be repeated for every component;
  不需要对每个组件重复进行；

• Doesn’t require you to import and use StyleSheet.create() in every component

  不需要您在每个组件中导入和使用StyleSheet.create()

用法 (Usage)

Write your CSS in a single style.js file and also import the react-native-simple-styles NPM package here. You should also make sure to export the react-native-simple-styles package from here using whatever name you like (this will make your life easier with importing later!). Use standard CSS-in-JS object format. You can organise your CSS however you like. E.g.

在单个style.js文件中编写CSS，并在style.js导入react-native-simple-styles NPM包。 您还应该确保使用您喜欢的任何名称从此处导出react-native-simple-styles包(这将使您以后的导入更加轻松！)。 使用标准CSS-in-JS对象格式。 您可以根据需要组织CSS。 例如

// styles.jsimport reactNativeSimpleStyles from "react-native-simple-styles";const headings = {
	h1: { fontSize: 56 },
	h2: { fontSize: 36 },
	h3: { fontSize: 24 },
}const textUtilities = {
	uppercase: { textTransform: 'uppercase'},
	italic: { fontStyles: 'italic'}
}export const styles = {
	centerAll: {
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center'
	},
	hScreen: {
		height: '100vh'
	}
	...headings,
	...textUtilities,
}export const simpleStyles = reactNativeSimpleStyles;

In your components pass in your stylesheet to the react-native-simple-styles function you exported from style.js. All of the standard React Native core components will be returned that you can use as normal. The only difference is that they now accept a className prop that you can pass your classNames to.

在您的组件中，将样式表传递给从style.js导出的react-native-simple-styles函数。 将返回您可以正常使用的所有标准React Native核心组件 。 唯一的区别是，它们现在接受可以将className传递给的className道具。

import { styles, simpleStyles) from "./styles/style";
const { View, Text } = simpleStyles(styles);const Example = () => (
	<View className="centerAll hScreen">
		<Text className="h1 uppercase italic">
			Just like native CSS (almost!)
		</Text>
	</View>
);export default Example;

You can also mix and match classNames and inline styles and it will work fine.

您还可以混合和匹配className和内联样式，它将很好地工作。

<Text className='uppercase' style={{ fontWeight: bold }> This works fine too. </Text>

引擎盖下 (Under the hood)

Under the hood reactNativeSimpleStyles is simply a higher order component that wraps the regular react native components.

在幕后，reactNativeSimpleStyles只是一个高阶组件，它包装了常规的react本机组件 。

This HOC uses React Native’s StyleSheet component along with your stylesheet to find your styles and abstracts away the manual process of creating a StyleSheet for each component. Since the StyleSheet component is still used to create the styles there are no performance differences in this approach and you still benefit from cached style ID’s, etc.

该HOC使用React Native的StyleSheet组件以及您的样式表来查找样式，并抽象出为每个组件创建StyleSheet的手动过程。 由于StyleSheet组件仍用于创建样式，因此该方法没有性能差异，您仍然可以从缓存的样式ID等中受益。

免责声明和贡献 (Disclaimers & Contributions)

Full disclosure that I am not primarily a React Native developer and I may have overlooked certain issues that may exist with this library.

完全公开我不是主要的React Native开发人员，并且我可能忽略了该库可能存在的某些问题。

If you would like to enhance this library, fix bugs, add typescript support, add tests, or otherwise contribute in any other way you are more than welcome to raise an issue or make a PR.

如果您想增强该库，修复错误，添加打字稿支持，添加测试或以其他任何方式做出贡献，我们非常欢迎提出问题或进行PR。

NPM: React Native Simple StylesGithub: React Native Simple Styles

NPM： React本机简单样式 Github： React本机简单样式

翻译自: https://medium.com/swlh/simple-styling-in-react-native-d44ddbd955e6