一、基本樣式

（1）內(nèi)聯(lián)樣式
在組件里面定義樣式

<Text style={{color:'orange', fontSize:20}}> 小字號(hào)內(nèi)聯(lián)樣式</Text>

（2）外聯(lián)樣式
在組件里指向外面的樣式

<Text style={[styles.orange, styles.bigFontSize]}> 大字號(hào)外聯(lián)樣式</Text>

（3）樣式具有覆蓋性
如果定義相同屬性的樣式，后面會(huì)覆蓋前面的樣式，例如，后面是紅色前面是藍(lán)色樣式，最終是現(xiàn)實(shí)的藍(lán)色：

<Text style={[styles.red, styles.bigblue]}>紅色被大藍(lán)覆蓋了</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]}>大藍(lán)被紅色覆蓋了</Text><Text style={[styles.red, styles.bigblue]}>紅色被大藍(lán)覆蓋了</Text><Text style={{color:'orange', fontSize:20}}> 小字號(hào)內(nèi)聯(lián)樣式</Text><Text style={[styles.orange, styles.bigFontSize]}> 大字號(hào)外聯(lián)樣式</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開發(fā)者用腳趾頭都能閉眼寫出來。如果我們需要知道該組件有哪些樣式，又不想查手冊(cè)，一個(gè)最為簡(jiǎn)單的方法是，在樣式表里寫錯(cuò)一個(gè)屬性，比如我寫一個(gè)沒有的屬性“border”。但是該屬性必須寫到樣式的創(chuàng)建中去，而不能寫為內(nèi)聯(lián)樣式。寫成內(nèi)聯(lián)樣式，你是看不到報(bào)錯(cuò)提示的。我們改寫成樣式表創(chuàng)建類里面：

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

這個(gè)時(shí)候你就能齊刷刷地看到樣式表的報(bào)錯(cuò)和提示有哪些樣式了，如下圖所示：

上面已經(jīng)展示了獨(dú)立樣式類了，那么樣式類創(chuàng)建很簡(jiǎn)單，我們只需要使用React.StyleSheet來創(chuàng)建類。其實(shí)創(chuàng)建的類就是一個(gè)js對(duì)象而已。那么在組件上引用是這樣的，就跟上面的代碼一樣。

三、Flexbox布局

其實(shí)，這樣的css樣式，作為web開發(fā)者一用就會(huì)，那么說說布局的事兒。Flexbox是css3里面引入的布局模型-彈性盒子模型，旨在通過彈性的方式來對(duì)其和分布容器中內(nèi)容的空間，使其能夠適應(yīng)不同的屏幕寬度。React Native中的Flexbox是這個(gè)規(guī)范的一個(gè)子集。除去margin, padding, position等大家熟悉的web布局的話，最為重要的就是flexbox，目前支持的屬性如下,有6個(gè)：

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

當(dāng)一個(gè)(元素)組件，定義了flex屬性時(shí)，表示該元素是可伸縮的。當(dāng)然flex的屬性值是大于0的時(shí)候才伸縮，其小于和等于0的時(shí)候不伸縮，例如：flex:0, flex:-1等。上面的代碼，最外層的view是可伸縮的，因?yàn)闆]有兄弟節(jié)點(diǎn)和它搶占空間。里層是3個(gè)view,可以看到三個(gè)view的flex屬性加起來是5+5+10=20,所以第一個(gè)view和第二個(gè)view分別占1／4伸縮空間， 最后一個(gè)view占據(jù)1／2空間，具體如下圖：

（2）flexDirection

flexDirection在React-Native中只有兩個(gè)屬性，一個(gè)是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',}});

（3）flexWrap：是否換行

（4）alignItems：

（5）justifyContent絕對(duì)布局

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

會(huì)根據(jù)水平還是垂直來布局，若干個(gè)元素均勻垂直或者水平布局滿整個(gè)寬高。

（6）alignSelf:對(duì)齊方式

alignSelf的對(duì)齊方式主要有四種：flex-start、 flex-end、 center、 auto、 stretch。看看代碼，應(yīng)該就很清楚了：

總結(jié)

以上是生活随笔為你收集整理的[React-Native]样式和布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。