reactNative 中的样式

川长思鸟来 2022-03-21 07:08 269阅读 0赞

# reactNative 样式 #

> 在 React Native 中，你并不需要学习什么特殊的语法来定义样式。我们仍然是使用 JavaScript 来写样式。所有的核心组件都接受名为style的属性。这些样式名基本上是遵循了 web 上的 CSS 的命名，只是按照 JS 的语法要求使用了驼峰命名法，例如将background-color改为backgroundColor。

style属性可以是一个普通的 JavaScript 对象。这是最简单的用法，因而在示例代码中很常见。你还可以传入一个数组——在数组中位置居后的样式对象比居前的优先级更高，这样你可以间接实现样式的继承。

实际开发中组件的样式会越来越复杂，我们建议使用StyleSheet.create来集中定义组件的样式。比如像下面这样：

import React, { Component } from 'react';
    import { AppRegistry, StyleSheet, Text, View } from 'react-native';
    
    export default class LotsOfStyles extends Component {
      render() {
        return (
          <View>
            <Text style={styles.red}>just red</Text>
            <Text style={styles.bigblue}>just bigblue</Text>
            <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
            <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      bigblue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
      },
      red: {
        color: 'red',
      },
    });

## 高度与宽度 ##

指定宽高  
最简单的给组件设定尺寸的方式就是在样式中指定固定的width和height。React Native 中的尺寸都是无单位的，表示的是与设备像素密度无关的逻辑像素点。

// 这样写，在所有的手机上这个宽高都是一样大小
    
    <View style={
       {width: 150, height: 150, backgroundColor: 'steelblue'}} />

## 弹性（Flex）宽高 （在native中用的最多的样式，不熟悉的尽可能多看看） ##

在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。  
flex 教程地址 [https://blog.csdn.net/qiphon3650/article/details/78771756][https_blog.csdn.net_qiphon3650_article_details_78771756]

[https_blog.csdn.net_qiphon3650_article_details_78771756]: https://blog.csdn.net/qiphon3650/article/details/78771756