首页 文章

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

提问于
浏览 次
1

我刚刚开始研究一个本机应用程序 . 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;
}
css react-native classname

3 回答

  • 0

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

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

const text-style: {
    fontSize: 20;
}

    注意：某些样式属性具有不同的名称 . 例如，css font-size 在react-native中是 fontSize

    回复于
  • 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%' ）之类的字符串 .

    回复于
  • 2

    因此，文档引用的对象是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;
    回复于

相关问题