首页 > 其他分享 >[React-Native]样式和布局

[React-Native]样式和布局

时间:2023-04-27 14:32:22浏览次数:50  
标签:flex 样式 React var Native red 属性


一、基本样式

(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);

[React-Native]样式和布局_样式表

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

作为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',
        }
    });

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

[React-Native]样式和布局_Self_02

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

三、Flexbox布局

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

[React-Native]样式和布局_Text_03

(1)先说说flex属性

[React-Native]样式和布局_Self_04

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空间,具体如下图:

[React-Native]样式和布局_样式表_05

(2)flexDirection

[React-Native]样式和布局_Text_06


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',
        }
    });

[React-Native]样式和布局_Text_07

(3)flexWrap:是否换行

[React-Native]样式和布局_Self_08

(4)alignItems:

[React-Native]样式和布局_样式表_09

(5)justifyContent绝对布局

[React-Native]样式和布局_样式表_10

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);

会根据水平还是垂直来布局,若干个元素均匀垂直或者水平布局满整个宽高。

[React-Native]样式和布局_样式表_11

(6)alignSelf:对齐方式

[React-Native]样式和布局_Text_12


alignSelf的对齐方式主要有四种:flex-start、 flex-end、 center、 auto、 stretch。看看代码,应该就很清楚了:

[React-Native]样式和布局_Text_13


[React-Native]样式和布局_样式表_14


[React-Native]样式和布局_样式表_15


标签:flex,样式,React,var,Native,red,属性
From: https://blog.51cto.com/dingxiaowei/6230753

相关文章

  • uniapp脚手架项目抖音小程序中使用了uView框架中的IndexList 索引列表组件报错uni.req
    解决办法如果您是vue-cli模式的项目,还需要在项目根目录的vue.config.js文件中进行如下配置://vue.config.js,如没有此文件则手动创建module.exports={transpileDependencies:['uview-ui']}......
  • Vue3中ref和reactive的对比
     先说ref()和reactive()Vue3这两个API作用是相似的,只不过ref()是针对变量的响应式包装,而reactive()是针对对象的响应式包装。 ref()和reactive()对比API说明目标ref()传入一个值,返回一个响应式的变量变量reactive()返回一个对象的响应式代理。通过Proxy包......
  • 汇总|React Native 开发工具一赏
    传统的开发中,按照平台划分为iOS,Android,Windows和Mac。其中,随着移动设备的使用移动端应用的开发也越来越多。传统上iOS应用使用Xcode工具、Objective-C和Swift语言进行开发,Android应用使用AndroidStudio工具、Java和kotlin语言进行开发。随着开发的普及......
  • react的基本:条件渲染
    importreactDomfrom"react-dom"//条件渲染ifelseletloading=false//写一个函数用于加载constloadData=()=>{if(loading){return<div>数据加载中</div>}else{return<div>数据加载完成,此处直接显示数据</div>}......
  • react的基本使用
    //导入react和react-dom包importreactfrom'react'importreactDomfrom'react-dom'//console.log(react)//console.log(reactDom)//创建react元素//参数1.元素2.属性【没有就写null】3.元素子节点//react创建元素并返回consth1=react.crea......
  • uniapp button样式置空
    小程序转发,得用button,样式太丑了, <viewclass="one"> <buttondata-name="shareBtn"open-type="share"hover-class="none"> <imagesrc="/static/index/carddetail/sendcard.png"></image&g......
  • 为什么以及什么时候 React 会渲染一个组件
    组件显示到屏幕之前,其必须被React渲染。在您触发渲染后,React会调用您的组件来确定要在屏幕上显示的内容。“渲染中”即React在调用您的组件。在进行初次渲染时,React会调用根组件。对于后续的渲染,React会调用内部状态更新触发了渲染的函数组件。这个过程是递归......
  • react 更新状态中的对象
    State可以保存任何类型的JavaScript值,包括对象。但是你不应该直接改变你在React状态下持有的对象。相反,当你想更新一个对象时,你需要创建一个新对象(或复制一个现有对象),然后设置状态以使用该副本。const[position,setPosition]=useState({x:0,y:0});从技术上讲,可......
  • react18中antd的select选择器组件自定义下拉框的内容
    效果如图导入组件和图标import{Select}from'antd'import{ManOutlined,WomanOutlined}from'@ant-design/icons';const{Option}=Select;数据letuserListOption=[{value:1,label:"小明",avatar:"http://xxx......
  • 第二十三章:动态加载脚本和样式
    学习要点:1.元素位置2.动态脚本3.动态样式本章主要讲解上一章剩余的获取位置的DOM方法、动态加载脚本和样式。一.元素位置上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充一个DOM的方法:getBoundingClientRect()。这个方法返回一个矩形对象,包含四个属性:left、top、ri......