自学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
