一、基本樣式

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

這個時候你就能齊刷刷地看到樣式表的報錯和提示有哪些樣式了，如下圖所示：

上面已經展示了獨立樣式類了，那么樣式類創建很簡單，我們只需要使用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空間，具體如下圖：

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

（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。看看代碼，應該就很清楚了：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。