自學React（包括ReactNative和Redux）有一段時間了，開個專題記錄一下自學的過程和經驗。希望能幫助跟我一樣的萌新們一起學習探討React。
0.安裝依賴
如果是第一次寫ReactNative，請打開官方文檔 React Native，依次安裝Node,Watchman,React Native CLI，并保證Xcode已經更新至最新版本。
這些依賴都裝好之后，init這個項目，todo是項目名，可以隨意起：
react-native init todo
然后cd到todo，用xcode模擬器打開項目：
cd todo
react-native run-ios
或者還可以
cd todo/
open ios/todo.xcodeproj/
此時會打開xcode，點擊三角形的start按鈕，就會啟動模擬器。
1.開始
用編輯器（推薦Atom）打開todo項目，新建app.js, footer.js, header.js
首先在app.js中寫一個最基礎的component
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class App extends Component {
render() {
return (
<View />
);
}
}
export default App;
然后把index.ios.js之前的內容全部刪掉，修改為：
import {
AppRegistry,
} from 'react-native';
import App from './app';
AppRegistry.registerComponent('todo', () => App);
復制一模一樣的內容到index.android.js,這樣做的目的是在ios和android上看到的是一樣的，都由app.js來控制。
像剛才的app.js一樣，同樣的填充最基礎的內容到footer.js, Header.js
Header.js
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
class Header extends Component {
render() {
return (
<View />
);
}
}
export default Header;
footer.js
import React, { Component } from 'react';
import { View, Text, Stylesheet } from 'react-native';
class Footer extends Component {
render() {
return (
<View />
);
}
}
export default Footer;
在App中引入Header和Footer:
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Header from './header';
import Footer from './footer';
class App extends Component {
render() {
return (
<View>
<Header />
<View>
</View>
<Footer />
</View>
);
}
}
export default App;
2.在component里面寫CSS
有很多人不習慣React的這種CSS，HTML混寫的方式，我倒是覺得非常清楚和方便。。
在app.js中寫上一些樣式
class App extends Component {
render() {
return (
<View style={styles.container}>
<Header />
<View style={styles.content}>
</View>
<Footer />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5F5F5"
},
content: {
flex: 1
}
})
現在cmd+R刷新模擬器，背景從純白變成了灰色。
如果想要專門針對iOS做一些樣式調整該怎么辦呢？
可以引入Platform：
import { View, Text, StyleSheet, Platform } from 'react-native';
...
...
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#F5F5F5",
... Platform.select({
ios: { paddingTop: 30 }
})
},
content: {
flex: 1
}
})
關于Platform用法，可以參考文檔：Platform
