本教程內(nèi)容和https://zhiwehu.gitbooks.io/react-native/content/ 同步更新。

模塊劃分

接下來我們來進(jìn)行模塊劃分，首先我們可以看到在項(xiàng)目根目錄有2個(gè)index文件竭沫，分別是：

• index.ios.js：iOS App主文件
• index.android.js Android App主文件

我們刪除掉原來的代碼，改成下面的代碼：

// 導(dǎo)入AppRegistry模塊
import {
  AppRegistry
} from 'react-native';

// 導(dǎo)入我們的App模塊
import App from "./app";

// 注冊App
AppRegistry.registerComponent('todo', () => App);

我們在項(xiàng)目根目錄創(chuàng)建三個(gè)js文件，分別是：

• app.js：iOS和Android通用主文件
• header.js：Header模塊
• footer.js：Footer模塊

接下來我們分別創(chuàng)建這三個(gè)文件钞翔。

app.js

// 引入React和Component
import React, { Component } from "react";
// 引入View，類似于html的Div
import { View, Text, } from "react-native";
// 引入我們的Header模塊
import Header from "./header";
// 引入我們的Footer模塊
import Footer from "./footer";

// 定義App類炼绘，這個(gè)類是Component的子類
class App extends Component {
  /*
   實(shí)現(xiàn)App類的render方法嗅战，這個(gè)方法返回一個(gè)View，
   其組成分別是Header, Content和Footer
   */
  render() {
    return (
      <View>
        <Header />
        <View>
          <Text>我是Content</Text>
        </View>
        <Footer />
      </View>
    );
  }
}

// 導(dǎo)出這個(gè)模塊俺亮，供外部調(diào)用
export default App;

App類的render()方法是App模塊的渲染方法驮捍，該方法返回一個(gè)View模塊，其組成是Header和Footer脚曾，中間是一個(gè)子View东且。

header.js

// 引入React和Component
import React, { Component } from "react";
// 引入Text，顯示文字
import { View, Text } from "react-native";

// 定義Header類本讥，這個(gè)類是Component的子類
class Header extends Component {
  /*
   實(shí)現(xiàn)Header類的render方法珊泳，這個(gè)方法返回一個(gè)View，顯示Footer
   */
  render() {
    return (
      <View>
        <Text>我是Header</Text>
      </View>
    );
  }
}

// 導(dǎo)出這個(gè)模塊拷沸，供外部調(diào)用
export default Header;

footer.js

// 引入React和Component
import React, { Component } from "react";
// 引入Text色查，顯示文字
import { View, Text } from "react-native";

// 定義Footer類，這個(gè)類是Component的子類
class Footer extends Component {
  /*
   實(shí)現(xiàn)Header類的render方法撞芍，這個(gè)方法返回一個(gè)View秧了，顯示Footer
   */
  render() {
    return (
      <View>
        <Text>我是Footer</Text>
      </View>
    );
  }
}

// 導(dǎo)出這個(gè)模塊，供外部調(diào)用
export default Footer;

第二次運(yùn)行

StyleSheet

我們需要修改一下樣式序无，

1. Header把系統(tǒng)狀態(tài)欄檔住了
2. Content需要彈性高度

修改app.js代碼验毡，導(dǎo)入StyleSheet

import { View, Text, StyleSheet } from "react-native";

使用StyleSheet.create()創(chuàng)建一個(gè)styles對象

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F5F5F5",
    paddingTop: 30,
  },
  content: {
    flex: 1
  }
});

然后衡创，分別給最外層的View以及content的View設(shè)置style屬性。

render() {
  return (
    <View style={styles.container}>
      <Header />

      <View style={styles.content}>
        <Text>我是Content</Text>
      </View>

      <Footer />
    </View>
  );
}

再次運(yùn)行晶通，結(jié)果如下：

看一下在Android上運(yùn)行的樣子：

注意璃氢，在Android上運(yùn)行的時(shí)候，Header離狀態(tài)欄距離太大了狮辽，因?yàn)锳ndroid不需要設(shè)置paddingTop而不會(huì)檔住狀態(tài)欄一也，所以這個(gè)paddingTop只需要給iOS設(shè)置就可以了。接下來我們來使用Platform來實(shí)現(xiàn)這個(gè)功能隘竭。

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
  }
});

再來看看Android的效果

代碼：https://github.com/zhiwehu/todo/tree/first

相關(guān)文章：

1. React Native實(shí)戰(zhàn)開發(fā)1：搭建開發(fā)環(huán)境
2. React Native實(shí)戰(zhàn)開發(fā)2：布局
3. React Native實(shí)戰(zhàn)開發(fā)3：模塊劃分
4. React Native實(shí)戰(zhàn)開發(fā)4：屬性和狀態(tài)
5. React Native實(shí)戰(zhàn)開發(fā)5：使用TextInput
6. React Native實(shí)戰(zhàn)開發(fā)6：使用ListView
7. React Native實(shí)戰(zhàn)開發(fā)7：使用Switch更新todo complete狀態(tài)
8. React Native實(shí)戰(zhàn)開發(fā)8: 刪除todo item