RN官方網(wǎng)站：
中文網(wǎng)：https://reactnative.cn/
英文網(wǎng)站：https://facebook.github.io/react-native/docs/getting-started.html
1.React native介紹
（1）概念：React Native簡稱RN是Facebook2015年發(fā)布的跨平臺開發(fā)框架聂沙，它的設(shè)計理念是：使用React Native開發(fā)秆麸，既擁有Native的良好人機交互體驗，又保留了React的開發(fā)效率及汉。
（2）RN優(yōu)點：
開發(fā)效率高沮趣，成本低。寫一套代碼可以在兩個平臺運行坷随；
快速熱更新房铭，可以實現(xiàn)增量開發(fā)。
支持混合開發(fā)温眉，原生代碼可以和RN實現(xiàn)雙向通訊缸匪。
2.搭建開發(fā)環(huán)境
https://facebook.github.io/react-native/docs/getting-started.html
參照此鏈接安裝mac os 下ios的RN開發(fā)環(huán)境，選擇Building Projects with Native Code
需要安裝：
（1）Homebrew, Mac系統(tǒng)的包管理器类溢，用于安裝NodeJS和一些其他必需的工具軟件凌蔬。
本人安裝Homebrew沒有遇到問題。
?(2) Node.js
React Native目前需要NodeJS 5.0或更高版本闯冷，用來執(zhí)行npm命令砂心，安裝RN依賴包。
(3)React Native的命令行工具（react-native-cli）
(4)xcode
(5)Watchman?Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具蛇耀。安裝此工具可以提高開發(fā)時的性能（packager可以快速捕捉文件的變化從而實現(xiàn)實時刷新）计贰。譯注：此工具官方雖然是推薦安裝，但在實踐中蒂窒，我們認為此工具是必須安裝躁倒，否則可能無法正常開發(fā)。
(6)安裝WebStorm來編寫React Native應(yīng)用
andriod開發(fā)需要安裝JDK8洒琢、Android Studio
3. 創(chuàng)建項目
（1）打開命令行執(zhí)行react-native init TShop -version 0.55 就創(chuàng)建了一個RN項目秧秉，名稱是Tshop，版本號可以不加衰抑，默認是最新版本象迎。
（2）執(zhí)行react-native run-android命令運行Android程序
? ? ? ? ?執(zhí)行react-native run-ios命令運行ios程序
? ?(3)項目中Anroid文件夾下是Android原生代碼。ios文件夾下是ios的原生代碼呛踊。node_modules 是自動生成的項目依賴文件砾淌，不要動SVN和Git不要提交。
（4）index.js 程序的入口文件谭网。
對其中的代碼分析如下：import App from ‘./App’ 此句話的含義是項目一啟動就加載了App.js文件中名為的App組件汪厨。
import {AppRegistry} from 'react-native';
import App from './App'; // 引入了 App.js
// 注冊程序
AppRegistry.registerComponent('TShop', () => App);
（5）實質(zhì)是用JSX的語言映射為了iOS和Android兩個平臺的原生代碼??
JSX實質(zhì)就是JS添加了標簽X以使用控件進行顯示。
控件中再回到j(luò)s語法要加{}
?注意：文字顯示要放在<Text>控件里
const instructions = Platform.select({
? ?ios: 'Press Cmd+R to reload,\n' +
? ? ?'Cmd+D or shake for dev menu',
? android: 'Double tap R on your keyboard to reload,\n' +
? ? ?'Shake or press menu button for dev menu',
?});
export default class App extends Component {
? render() {
? ? return (
? );
? }
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,
? },
};
