Question

我刚刚开始研究一个本机应用程序。 official docs suggest使用JavaScript对象为组件创建样式，如此，

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

我尝试将className添加到Text属性中，因此我可以使用简单的样式表添加css。这甚至可能与本机反应（我知道我们可以做出反应，但）？像这样的东西，

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

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

Answer 1

react-native中没有className，但您可以像本机一样使用react-native中的样式对象：

<Text style={text-style}></Text>

const text-style: {
    fontSize: 20;
}

注意：某些样式属性使用不同的名称。例如，css font-size在react-native

中是fontSize

Answer 2

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 API的对象。一个好的经验法则是在驼峰的情况下编写你知道的css样式，例如： justifyContent而不是justify-content React Native引擎通过使用这些StyleSheet对象来尽力复制CSS，阅读文档和示例将帮助您了解StyleSheet能够做什么并且不具备（提示：flex和Dimensions API是惊人的，百分比是'50%'}之类的字符串。

Answer 3

因此，文档所引用的对象是jsX中的Stylesheet对象。您需要从react-native导入样式表，并且您在此处写入const的所有样式都将进入要使用样式表创建的对象。

import {StyleSheet} from 'react-native';
var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    backgroundColor: '#0070af',
    alignItems: 'center',
    backgroundColor:'#0070af'
  },
  textstyle:{
    color:'white',
    fontFamily: "Roboto",
  }});

export default styles;

Answer 4

需要配置以响应本机sass / css转换器 https://github.com/kristerkari/react-native-sass-transformer

将JSX className属性转换为样式属性，该样式属性可在React Native中在运行时计算样式。该插件用于将包含已解析的CSS媒体查询和CSS视口单元的样式对象与React Native进行匹配。

请查看此链接：https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style

使用React本机打字稿时，您还需要安装此软件包 https://github.com/kristerkari/react-native-types-for-css-modules

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

4 个答案: