近段時間一直在忙，所以博客也沒有更新，這兩天我翻了一下寫的這幾篇博客，感覺寫的都很片面，所以，我想重新寫一個系列教程，從最基礎(chǔ)的開始，來讓大家更容易學(xué)會React-Native。
這個系列大部分只介紹Android和iOS通用的部分
一、關(guān)于RN環(huán)境搭建
這個問題我在博客上寫過，既然是系列教程，那么就在這個系列里面重新再寫一遍
1、Mac上搭建RN開發(fā)環(huán)境
安裝homebrew:打開終端輸入
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在Max OS X 10.11（El Capitan)版本中，homebrew在安裝軟件時可能會碰到/usr/local目錄不可寫的權(quán)限問題。可以使用下面的命令修復(fù)：
sudo chown -R `whoami` /usr/local
通過HomeBrew來安裝Node.js
brew install node
安裝React Native的命令行工具（react-native-cli）
npm install -g react-native-cli
如果你看到EACCES: permission denied這樣的權(quán)限報錯，那么修復(fù)權(quán)限問題
sudo chown -R `whoami` /usr/local
既然要做iOS開發(fā)，那么Xcode不會不知道吧，開發(fā)iOS必不可少的工具Xcode，這個可以直接在AppStore里面下載。
安裝WatchMan
brew install watchman
環(huán)境搭建完畢，創(chuàng)建運行RN項目
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
2、Mac上搭建RN安卓開發(fā)環(huán)境
這里有一篇教程挺詳細(xì)的react native android開發(fā)環(huán)境搭建（mac系統(tǒng))，這里我就不再多說(我不會告訴大家我搭建完成之后就沒在意搭建的具體步驟...)。
二、關(guān)于RN文件介紹
剛創(chuàng)建好的應(yīng)用程序文件夾如下圖所示
其中app文件夾是我自己創(chuàng)建的，咱們看一下文件夾中的內(nèi)容：tests文件夾是最近才加進去的，前幾個版本沒有，應(yīng)該是測試用的，暫時沒做研究，ios和android文件夾對應(yīng)iOS和安卓程序的文件存放的文件夾，這些我們不用管，node_modules是我們開發(fā)所需要的依賴庫。package.json是配置文件，index.android.js和index.ios.js是我們程序的入口文件，我們寫的代碼就是在這里寫的。打開index.ios.js我們可以看到這些
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
具體介紹可以看我的這篇博客
好了，接下來開始我們的系列教程
三、Text
這里我直接用我已經(jīng)寫好的框架來介紹RN的組件Text
顯而易見，Text就是文本，就如同你現(xiàn)在看到的文字。
那么如何使用呢？
其實在index.ios.js文件中有這樣的組件。那是最基礎(chǔ)的用法
<Text> Welcome to React Native!</Text>
其實Text有很多屬性和樣式,以下是一些常用的屬性和樣式！
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class TextClass extends Component {
onPressTitle(){
//Text onPress的點擊方法，點擊之后的操作寫在這里！
}
render() {
//numberOfLines表示的是文本的行數(shù)，包括折疊產(chǎn)生的換行在內(nèi)，總的行數(shù)不會超過這個屬性的限制
//onPress當(dāng)文本被點擊以后調(diào)用此回調(diào)函數(shù)。
//style文本的樣式,這里把常用的樣式列出來供大家參考,除了自身的樣式外，還繼承了View的樣式
//View的樣式咱們后邊再說，現(xiàn)在先看Text的樣式
//ellipsizeMode:設(shè)置文本省略的位置，必須和numberOfLines配合使用
//
//如下，Text可以嵌套使用，不過一般為了文字上下左右居中，用View嵌套Text
return (
<View style={styles.container}>
<Text numberOfLines={1}
onPress={this.onPressTitle}
style={styles.textstyle}
ellipsizeMode='head'>
你好！我是Demon404,歡迎關(guān)注我!
</Text>
<Text style={{fontWeight: 'normal'}}>
I am bold
<Text style={{color: 'red'}}>
and red
</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
textstyle: {
color: 'black',//文字的顏色
fontFamily: 'Times',//設(shè)置字體
fontSize: 20,//設(shè)置文字大小
fontStyle: 'italic',//設(shè)置文字：normal：正常體；italic：斜體
fontWeight: 'normal',//設(shè)置粗體字，'normal' /*default*/, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'
lineHeight: 30,//設(shè)置行高
textAlign: 'center',//設(shè)置字體位置，'auto' /*default*/, 'left', 'right', 'center', 'justify'
textDecorationLine: 'underline',//下劃線和刪除線的樣式：['none' /*default*/, 'underline', 'line-through', 'underline line-through'
}
});
四、View
接下來我們說最常用的控件View，在開發(fā)過程中，View是必不可少的
export default class ViewClass extends Component {
render() {
return (
<View style={styles.container}>
</View>
);
}
}
View是一個支持Flexbox布局、樣式、一些觸摸處理、和一些無障礙功能的容器，并且它可以放到其它的視圖里，也可以有任意多個任意類型的子視圖。不論在什么平臺上，View都會直接對應(yīng)一個平臺的原生視圖。
View使用挺簡單的，直接使用就可以，這里我著重介紹一下View的屬性和它的一些樣式,其中View有一個最重要的Flex布局，這個篇幅比較長，咱們新開一個文章講解
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
export default class ViewClass extends Component {
//View常用屬性暫時就介紹這么多，其他的咱們以后重點介紹
doubleClick() {
//雙擊之后的事件處理寫在這里
}
moveTest() {
console.log('移動');
}
render() {
//accessible表示此視圖時一個啟用了無障礙功能的元素。默認(rèn)為true
//onMagicTap:當(dāng)accessible為true時，雙擊View會調(diào)用此函數(shù)。
//onMoveShouldSetResponder: 觸摸控件并滑動時調(diào)用的方法
//onMoveShouldSetResponderCapture：觸摸控件并滑動時調(diào)用的方法,避免子視圖響應(yīng)
//onResponderMove：用戶在View上移動手指調(diào)用
//onResponderRelease：結(jié)束觸摸時調(diào)用
//pointerEvents:控制當(dāng)前視圖是否可以觸控'box-none', 'none', 'box-only', 'auto'
//其他的屬性以后在介紹
return (
<View style={styles.container}>
<View style={styles.viewStyle}
accessible={true}
onMagicTap={this.doubleClick}
onMoveShouldSetResponderCapture={this.moveTest}
pointerEvents='auto'>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
//View樣式有Flex布局
//一般來說，使用flexDirection、alignItems和 justifyContent三個樣式屬性就已經(jīng)能滿足大多數(shù)布局需求
//flexDirection的默認(rèn)值是column而不是row，alignItems的默認(rèn)值是stretch而不是flex-start，以及flex只能指定一個數(shù)字值。
//關(guān)于flex布局咱們另起一篇文章。
container: {
flex: 1,
//當(dāng)設(shè)置justifyContent: 'center',//上下居中 alignItems: 'center',//左右居中
//那么這個View中的子視圖都會在這個View的中間
justifyContent: 'center',//上下居中
alignItems: 'center',//左右居中
backgroundColor: '#F5FCFF',
},
viewStyle: {
width: 100,//設(shè)置寬度
height: 100,//設(shè)置高度
backgroundColor: 'red',//背景顏色
backfaceVisibility: 'visible',//定義界面翻轉(zhuǎn)的‘visible', 'hidden’
borderBottomColor: 'blue',//設(shè)置底部邊框顏色
borderBottomLeftRadius: 20,//設(shè)置左下圓角大小
borderBottomRightRadius: 40,//設(shè)置右下圓角大小
borderBottomWidth: 2,//設(shè)置底部邊框的粗細(xì)大小
//borderColor:'green',//設(shè)置所有邊框顏色
borderLeftColor: 'green',//設(shè)置左邊框顏色
borderLeftWidth: 5,//設(shè)置左邊框粗細(xì)大小
//borderRadius : 10,//設(shè)置正題邊框圓角大小
//borderRightColor
//borderRightWidth
borderStyle: 'solid',//設(shè)置邊框樣式'solid', 'dotted', 'dashed'
//borderTopColor color
//borderTopLeftRadius ReactPropTypes.number
//borderTopRightRadius ReactPropTypes.number
//borderTopWidth ReactPropTypes.number
//borderWidth ReactPropTypes.number
overflow: 'visible',//設(shè)置內(nèi)容超過容器顯示還是隱藏'visible', 'hidden'
opacity: 0.5,//設(shè)置透明度
}
});
這些代碼，我放在了我的github上：https://github.com/Demon404/Honey
ps:以后這個系列的教程會全放在這個倉庫中！
