[React-Native]样式和布局-阿里云开发者社区

开发者社区> 蓬莱仙羽> 正文

[React-Native]样式和布局

简介: 一、基本样式 (1)内联样式 在组件里面定义样式 小字号内联样式 (2)外联样式 在组件里指向外面的样式 大字号外联样式 (3)样式具有覆盖性 如果定义相同属性的样式,后面会覆盖前面的样式,例如,后面是红色前面是蓝色样式,最终...
+关注继续查看

一、基本样式

(1)内联样式
在组件里面定义样式

<Text style={{color:'orange', fontSize:20}}> 小字号内联样式</Text>

(2)外联样式
在组件里指向外面的样式

<Text style={[styles.orange, styles.bigFontSize]}> 大字号外联样式</Text>

(3)样式具有覆盖性
如果定义相同属性的样式,后面会覆盖前面的样式,例如,后面是红色前面是蓝色样式,最终是现实的蓝色:

<Text style={[styles.red, styles.bigblue]}>红色被大蓝覆盖了</Text>

(4)样式具有组合性
例如颜色颜色跟字体样式组合

案例代码:

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';

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]}>大蓝被红色覆盖了</Text>
                <Text style={[styles.red, styles.bigblue]}>红色被大蓝覆盖了</Text>
                <Text style={{color:'orange', fontSize:20}}> 小字号内联样式</Text>
                <Text style={[styles.orange, styles.bigFontSize]}> 大字号外联样式</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    bigblue: {
        color: 'blue',
        fontWeight: 'bold',
        fontSize: 30,
    },
    red: {
        color: 'red',
    },
    bigFontSize:{
        fontSize:40,
    },
    orange:
    {
        color:'orange',
    }
});

AppRegistry.registerComponent('HelloWorld', () => LotsOfStyles);

这里写图片描述

二、如何知道哪些组建支持哪些样式

作为web开发者用脚趾头都能闭眼写出来。如果我们需要知道该组件有哪些样式,又不想查手册,一个最为简单的方法是,在样式表里写错一个属性,比如我写一个没有的属性“border”。但是该属性必须写到样式的创建中去,而不能写为内联样式。写成内联样式,你是看不到报错提示的。我们改写成样式表创建类里面:

var HelloWorld = React.createClass({
        render: function() {
                return (
                    <View>
                        <View style={styles.style_1}>

                        </View>
                    </View>
                );
        }
    });

    var styles = StyleSheet.create({
        style_1:{
            border: '1px solid red',
            height:40,
            borderWidth: 1,  
            borderColor: 'red',
        }
    });

这个时候你就能齐刷刷地看到样式表的报错和提示有哪些样式了,如下图所示:
image

上面已经展示了独立样式类了,那么样式类创建很简单,我们只需要使用React.StyleSheet来创建类。其实创建的类就是一个js对象而已。那么在组件上引用是这样的,就跟上面的代码一样。

三、Flexbox布局

其实,这样的css样式,作为web开发者一用就会,那么说说布局的事儿。Flexbox是css3里面引入的布局模型-弹性盒子模型,旨在通过弹性的方式来对其和分布容器中内容的空间,使其能够适应不同的屏幕宽度。React Native中的Flexbox是这个规范的一个子集。除去margin, padding, position等大家熟悉的web布局的话,最为重要的就是flexbox,目前支持的属性如下,有6个:
这里写图片描述

(1)先说说flex属性
这里写图片描述

var HelloWorld = React.createClass({
            render: function() {
                return (
                    <View style={styles.style_0}>
                        <View style={styles.style_1}></View>
                        <View style={styles.style_1}></View>
                        <View style={{flex:10}}></View>
                    </View>
                );
            }
        });

        var styles = StyleSheet.create({
            style_0:{
                flex:1,
            },
            style_1:{
                flex: 5,
                height:40,
                borderWidth: 1,  
                borderColor: 'red',
            }
        });

当一个(元素)组件,定义了flex属性时,表示该元素是可伸缩的。当然flex的属性值是大于0的时候才伸缩,其小于和等于0的时候不伸缩,例如:flex:0, flex:-1等。上面的代码,最外层的view是可伸缩的,因为没有兄弟节点和它抢占空间。里层是3个view,可以看到三个view的flex属性加起来是5+5+10=20,所以第一个view和第二个view分别占1/4伸缩空间, 最后一个view占据1/2空间,具体如下图:
image

(2)flexDirection
这里写图片描述
flexDirection在React-Native中只有两个属性,一个是row(横向伸缩)和column(纵向伸缩)。具体的效果可见如下代码:

var HelloWorld = React.createClass({
        render: function() {
            return (
                <View style={styles.style_0}>
                    <View style={styles.style_1}>
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
                </View>
                <View style={[styles.style_1, {flexDirection: 'column'}]}>
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
                    <Text style={{marginTop:40, fontSize:25}}>1/4高</Text>
                </View>
                <View style={{flex:10, borderWidth: 1, borderColor: 'red',}}>
                    <Text style={{marginTop:40, fontSize:25}}>1/2高</Text>
                    </View>
                </View>
            );
        }
    });

    var styles = StyleSheet.create({
        style_0:{
            flex:1,
        },
        style_1:{
            flex: 5,
            flexDirection: 'row',
            height:40,
            borderWidth: 1,  
            borderColor: 'red',
        }
    });

image

(3)flexWrap:是否换行
这里写图片描述

(4)alignItems:
这里写图片描述

(5)justifyContent绝对布局
这里写图片描述

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => JustifyContentBasics);

会根据水平还是垂直来布局,若干个元素均匀垂直或者水平布局满整个宽高。
这里写图片描述

(6)alignSelf:对齐方式
这里写图片描述
alignSelf的对齐方式主要有四种:flex-start、 flex-end、 center、 auto、 stretch。看看代码,应该就很清楚了:
image
image

image
image

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
React Native之样式
样式 React Native 不实现 CSS,而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定,你可以阅读那些幻灯片,了解背后的基本原理。 声明样式 在 React Native 中声明样式的方法如下: var styles = StyleSheet.create({ base: { width: 38, hei
1599 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4080 0
网站input及textarea提示文字的样式及功能模块总结
web、前端、jQuery、Input、textarea、代码共用、优化
5134 0
css3的高级而有用且很少人知道的属性和样式
1、-webkit-mask 概属性可以给一个元素添加蒙层,蒙层可以是一个渐变或者半透明的png图片,这张png图片的 alpha 为 0 的位置会不显示元素这部分,alpha 为 1 的位置会显示元素这部分。
945 0
Android CircleProgress:可自由定制实现各种样式圆形加载进度
Android CircleProgress:可自由定制实现各种样式圆形加载进度 Android CircleProgress是github上一个第三方开源的项目,其在github上的项目主页是:https://github.com/lzyzsd/CircleProgress 该项目旨在实现丰富多彩、样式复杂的各种圆形进度加载,如图所示: Android CircleProgress可定制的属性很多,在实际的开发中可根据自己项目的需求任意二次开发和定制。
841 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
5736 0
px转换rem自适应手机样式
/ px转换rem var IntervalId = 0; window.onload = function() { IntervalId = self.
1172 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
3304 0
+关注
蓬莱仙羽
麦子学院讲师,游戏蛮牛专栏作家,CSDN博客专家,热爱游戏开发,热爱Coding!
588
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载