使用 CSS 样式表和类名的 React-Native 样式

Question

我刚刚开始开发一个 react-native 应用程序。在官方的文档建议使用JavaScript对象为你的组件创建的样式，像这样，

<Text style={style.text}>Blah Blah</Text>
const style = {
    text: {
        fontSize: 20
    }
}

我正在尝试将 className 添加到 Text 属性，以便我可以使用简单的样式表添加 css。这甚至可以通过 react-native 实现（不过我知道我们可以在 react 中做到这一点）？像这样的东西，

<Text className="text-style"></Text>

// from CSS file
text-style: {
    font-size: 20;
}

Answer 1

React Native 处理 CSS 样式的方式是StyleSheet对象是 CSS 作为语言的 js 副本。您需要做的就是创建一个 .js 并导入包含这些StyleSheet对象的 js对象。

StyleSheet JS 对象的一个​​例子是：

import { StyleSheet } from 'react-native'; 

const styles = StyleSheet.create({
  textStyle: {
    fontSize: 20,
  },
  otherStyle: {
    position: 'absolute',
    justifyContent: 'center',
  }
});

基本上它需要的是遵循StyleSheet. 一个好的经验法则是在骆驼情况下编写你知道的 css 样式，例如，justifyContent而不是justify-contentReact Native 引擎通过使用这些StyleSheet对象尽力复制 CSS ，阅读文档和示例将帮助你了解什么StyleSheet是有能力的，什么是不具备的能够（提示：flex和所述DimensionsAPI是惊人的和百分比都是等字符串'50%'）。

Answer 2

在react-native中没有className，但是你可以在react-native中使用样式对象，如下所示：

<Text style={textStyle}>Some Words</Text>

const textStyle = {
    fontSize: 20
}

注意：某些样式属性的名称不同。例如CSSfont-size是fontSizereact-native的