【ReactNative】入门：从todo App开始（1）

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