React Native學習系列 一

近段時間一直在忙，所以部落格也沒有更新，這兩天我翻了一下寫的這幾篇部落格，感覺寫的都很片面，所以，我想重新寫乙個系列教程，從最基礎的開始，來讓大家更容易學會react-native。

這個問題我在部落格上寫過，既然是系列教程，那麼就在這個系列裡面重新再寫一遍

1、mac上搭建rn開發環境

安裝homebrew:開啟終端輸入

/usr/bin/ruby -e "$(curl -fssl "

sudo chown -r `whoami` /usr/local

brew install node

npm install -g react-native-cli

sudo chown -r `whoami` /usr/local

brew install watchman

react-native init awesomeproject

cd awesomeproject
react-native run-ios

這裡有一篇教程挺詳細的react native android開發環境搭建（mac系統)，這裡我就不再多說(我不會告訴大家我搭建完成之後就沒在意搭建的具體步驟...)。

import react,  from 'react';

import  from 'react-native';
export default class awesomeproject extends component 
shake or press menu button for dev menu
);}}
const styles = stylesheet.create(,
welcome: ,
instructions: ,
});

好了，接下來開始我們的系列教程

這裡我直接用我已經寫好的框架來介紹rn的元件text

顯而易見，text就是文字，就如同你現在看到的文字。

那麼如何使用呢？

其實在index.ios.js檔案中有這樣的元件。那是最基礎的用法

welcome to react native!

import react,  from 'react';

import  from 'react-native';
export default class textclass extends component 
render() 
}const styles = stylesheet.create(,
textstyle: 
});

export default class viewclass extends component 

}

view使用挺簡單的，直接使用就可以，這裡我著重介紹一下view的屬性和它的一些樣式,其中view有乙個最重要的flex布局，這個篇幅比較長，咱們新開乙個文章講解

import react,  from 'react';

import  from 'react-native';
export default class viewclass extends component 
movetest() 
render() 
}const styles = stylesheet.create(,
viewstyle: 
});

react native學習資源

這是我覺得比較有用的學習資源 要多練習多理解 一 1.react native 官方api文件 2.react native中文文件 3.react native通訊機制詳解 4.react native布局篇 5.react native基礎指南 一 6.react native基礎指南 二 7....

React Native學習 起步

時間 2015 04 11 10 32 49 w3ctech 原文 主題react 本指南匯集react native各類學習資源，給大家提供便利。指南正在不斷的更新，大家有好的資源歡迎pull requests！同時還有awesome react native系列 研究原始碼也是乙個很好的學習方式...

react native學習筆記

react native專題 新建專案 react native init 專案名 執行專案 react native run android npm config set registry npm config set disturl var register require 在 工程目錄下的 v...