1.1 環境搭建
1.1.1 安裝Node.js
在瀏覽器中輸入http://nodejs.org下載node-v4.4.pkg然後雙擊安裝一路next,安裝成功過後在terminal中輸入node -v查看版本號
1.1.2安裝React Native
安裝Homebrew安裝watchman和flow的命令如下:
brew install watchman
brew install flow
npm install -g react-native-cli
如果需要管理員權限添加sudo
sudo npm install -g react-native-cli
如果下載比較慢可以試這個 https://segmentfault.com/a/1190000002642514
1.1.3使用NVM管理管理Node.js版本
1.1.4 創建項目
執行命令
react-native init Hello
如果比較慢可以用淘寶的連接或者下面的 https://segmentfault.com/a/1190000002642514
這裏也有react-native的配置:http://reactnative.cn/
1.2從React到React Native
React Native是基於React設計的
1.2.1 React簡單
React是一個JavaScript的類庫
React主要有如下3個特點:
- 作爲UI:React可以只作爲視圖(View)在MVC中使用。
- 虛擬DOM:這是一個亮點，傳統的是全部更新，React只更新不同的，高效
- 數據流(Data Flow): React支持單向數據流，相對於傳統更加靈活
React有哪些需要我們掌握的也:
- JSX語法知識:JSX語法類似於XML
- ES6相關知識:因爲ES6增加了很多語法特性，使用ES6更加快速地進行功能開發
- 前端基礎知識:主要是css以及javascript
1、簡單組件和數據傳遞
我們可以使用this.props來做簡單的數據傳遞
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一個例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example">
</div>
<script type="text/jsx">
var HelloMessage = React.createClass({
render: function() {
return <h1>Hello {this.props.name}!</h1>;
}
});
React.render(<HelloMessage name="React" />, document.getElementById('example'));
</script>
</body>
</html> 現在分析上面的代碼，它主要做了兩件事:
- 定義了一個組件HelloMessage,HelloMessages可以傳入name屬性，可以將內容用h1標籤渲染。
- 使用React.render方法將組件渲染到id爲example的div內，render方法有兩個參數，第一個參數就是要渲染的組件內容，第二個就是要渲染到的目標節點。
入門點1：
調用 React.createClass() 來創建一個組件，組件名稱（上例中的“HelloMessage”）第一個字母約定大寫；
入門點2：
render()：通過 React.createClass() 創建的組件，必須包含一個render()方法，具體說明查看http://www.css88.com/react/docs/component-specs.html#render
入門點3：
定義完組件，需要調用React.render()方法，將ReactElement （組件）渲染到對應的DOM元素中(這裏我們使用document.body)。
2.通過this.state更新視圖
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一個例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var Timer = React.createClass({
/*初始狀態*/
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
/*組件完成加載*/
componentDidMount: function() {
this.interval = setInterval(this.tick, 1000);
},
/*組件將被卸載*/
componentWillUnmount: function() {
clearInterval(this.interval);
},
render: function() {
return (
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
React.render(<Timer />, document.getElementById('example'));
</script>
</body>
</html>上面的代碼在瀏覽器運行每隔一秒，secondsElapsed增加1，我們通過React.createClass創建了一個組件。
其實，這裏已經涉及一個組件的生命週期了，getinitialState是組件的初始狀態，必須返回一個對象或者null對象，在getInitialState中，我們可以準備組件需要的數據以及後期需要更新的數據模型，也就是說getInitialState返回的對象是掛載在this.state上的，render方法的使用是渲染視圖，這裏render使用的數據是this.state,這樣我們可以通過更新this.state來更新視圖。componentDidMount是組件加載完成的狀態，這裏我們可以改變組件的狀態(this.state)。
上面的代碼中，componentDidMount設置了interval，每隔一秒鐘，secondsElapsed加1，componentWillUnmount在組件將被卸載時調用，我們可以在componentWillUnmount裏清除定時器this.interval
3、簡單應用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React第一個例子</title>
<script type="text/javascript" src="react.js"></script>
<script type="text/javascript" src="JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
var ShowEditor = React.createClass({
getInitialState: function() {
return {value: '你可以在這裏輸入文字'};
},
handleChange: function() {
this.setState({value: React.findDOMNode(this.refs.textarea).value});
},
render: function() {
return (
<div>
<h3>輸入</h3>
<textarea style={{width:300, height:150, outline:'none'}}
onChange={this.handleChange}
ref="textarea"
defaultValue={this.state.value} />
<h3>輸出</h3>
<div>
{this.state.value}
</div>
</div>
);
}
});
React.render(<ShowEditor />, document.getElementById('example'));
</script>
</body>
</html>現在我們來分析上面的代碼，showEditor做了一件事，用戶在textarea輸入文字的同時，會在<div>中及時輸出textarea中的文字，這裏面有四個地方需要我們狀態下。
- 可以通過state來修改視圖的狀態從而改變視圖。
- textarea上綁定了onChange的事件監聽，基目的是通過setState改變this.state.value。
- textarea添加了ref屬性，這樣我們就可以通過this.refs.textarea引用textarea對象了，
- React提供了findDOMNode的方法，通過它可以找到React的DOM
1.2.2 React Navtive簡介
React Native採用的語法是React, 因此，只要基本掌握了React和jsX，同時補充相關平臺(ios,android,web)的知識，就能開發Native應用和web應用了。
現在我們要創建React Native項目 命令行:react-native init demo
然後我們使用xcode打開index.ios.js文件運行項目
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} = React;
//var AppRegistry = React.AppRegistry;
//var StyleSheet = React.StyleSheet;
//var Text = React.Text;
//var View = React.View;
//var Image = React.Image;
var demo4 = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>歡迎來到React Native的世界</Text>
<Image style={{width:50,height:50, resizeMode: Image.resizeMode.contain}}
source={{uri:'https://facebook.github.io/react-native/img/header_logo.png'}}>
</Image>
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#05A5D1',
},
welcome: {
fontSize: 20,
color:'#fff'
},
});
AppRegistry.registerComponent('demo4', () => demo4);現在我們分析上面的代碼，使用require引用react-native模塊，然後定義了AppRegistry、StyleSheet、Text、View和Imaeg這5個對象，其實上面的var形式的對象也可能這樣定義:
var AppRegistry = React.AppRegistry;
使用var {} = React的形式更爲簡潔,我們使用StyleSheet.create創建的是一個樣式表的類，裏面包含container和welcome這兩個樣式對象，引用使用style={對象}
1.4 如何學習React Native
React Native官網：http//facebook.github.io/react-native。
React Native版本發佈:https://github.com/facebook/react-native/releases
React Native Github地址:https://github.com/facebook/react-native
問題搜索:https//github.com/facebook/react-native/issues。
