寫在前面的話
背景相關(guān)：android開發(fā)轉(zhuǎn)react-native（簡(jiǎn)稱RN）锣夹。隨著大前端時(shí)代的到來傍念，RN也走進(jìn)了更多開發(fā)者的視線蜡坊，原生 + RN在以后也將是APP開發(fā)的大趨勢(shì)民假。以后原生的不會(huì)放下，RN也會(huì)繼續(xù)學(xué)習(xí)抓于。（以前的關(guān)于原生的博客也將陸陸續(xù)續(xù)轉(zhuǎn)移到簡(jiǎn)書做粤，雖然沒多少東西?┬─┬ ノ( ' – 'ノ)）
學(xué)前準(zhǔn)備
首先需要配置環(huán)境，這里可以參考react-native中文網(wǎng)捉撮，里面講解非常詳細(xì)怕品，會(huì)針對(duì)所使用的電腦系統(tǒng)來顯示不同的教程。還有江清清的技術(shù)專欄同樣講解也很明白巾遭。
配置好環(huán)境后肉康，運(yùn)行第一個(gè)項(xiàng)目hello world
Hello World!
幾乎所有語言開始都是hello world，RN也不例外灼舍。
打開項(xiàng)目目錄
其中index.android.js就是android端的程序入口吼和，index.ios.js就是ios端的程序入口，可以看到官方給出兩個(gè)文件內(nèi)容大體是一樣的骑素，這也體現(xiàn)了一點(diǎn):RN里android和ios的代碼復(fù)用率基本在80%以上炫乓。這大大提高了開發(fā)速度。如果對(duì)語法不熟悉献丑，建議看看阮一峰老師寫的React入門末捣。看完后大體上應(yīng)該會(huì)對(duì)RN的語言有一個(gè)概念创橄。
現(xiàn)在就來修改下index.android.js來實(shí)現(xiàn)我們的helloworld箩做。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class HelloWorld 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('HelloWorld', () => HelloWorld);
這里我們只需修改render()方法就可以去實(shí)現(xiàn)helloword（render就是渲染的意思）
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
HelloWorld!
</Text>
</View>
);
}
render方法里只返回了一個(gè)html的片段，一個(gè)View里包含一個(gè)Text妥畏，這就是RN里推薦的寫法JSX邦邦。style里設(shè)置的是界面的樣式。這里不明白的可以看一下html+css入門醉蚁。
當(dāng)然這只是一個(gè)最簡(jiǎn)單的例子（簡(jiǎn)直LOW爆了(╯‵□′)╯︵┻━┻）燃辖，對(duì)RN里的組件，屬性馍管，狀態(tài)都沒有涉及郭赐，這些將會(huì)出現(xiàn)在下篇React-Native學(xué)習(xí)筆記中。
寫在后面的話
一些學(xué)前準(zhǔn)備的匯總：
- 環(huán)境搭建:http://reactnative.cn/docs/0.31/getting-started.html
- 江清清的技術(shù)專欄（React Native專題）:http://www.lcode.org/react-native/
- React 入門實(shí)例教程:http://www.ruanyifeng.com/blog/2015/03/react.html
- 阮一峰的《ECMAScript 6入門》:http://es6.ruanyifeng.com/ (es6了解即可)
也是剛開始學(xué)習(xí)RN确沸，小半個(gè)月吧捌锭，實(shí)現(xiàn)了一兩個(gè)demo，之后會(huì)慢慢的將自己的學(xué)習(xí)過程寫下來罗捎，一是幫自己回顧观谦，二是幫助一些想學(xué)習(xí)RN的朋友。
學(xué)習(xí)路漫漫桨菜，吾將上下而求索豁状。
