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

模塊劃分

接下來我們來進行模塊劃分，首先我們可以看到在項目根目錄有2個index文件，分別是：

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

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

// 導入AppRegistry模塊
import {
  AppRegistry
} from 'react-native';

// 導入我們的App模塊
import App from "./app";

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

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

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

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

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類，這個類是Component的子類
class App extends Component {
  /*
   實現(xiàn)App類的render方法，這個方法返回一個View，
   其組成分別是Header, Content和Footer
   */
  render() {
    return (
      <View>
        <Header />
        <View>
          <Text>我是Content</Text>
        </View>
        <Footer />
      </View>
    );
  }
}

// 導出這個模塊，供外部調(diào)用
export default App;

App類的render()方法是App模塊的渲染方法，該方法返回一個View模塊，其組成是Header和Footer，中間是一個子View。

header.js

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

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

// 導出這個模塊，供外部調(diào)用
export default Header;

footer.js

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

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

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

第二次運行

StyleSheet

我們需要修改一下樣式，

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

修改app.js代碼，導入StyleSheet

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

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

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

然后，分別給最外層的View以及content的View設置style屬性。

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

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

      <Footer />
    </View>
  );
}

再次運行，結果如下：

看一下在Android上運行的樣子：

注意，在Android上運行的時候，Header離狀態(tài)欄距離太大了，因為Android不需要設置paddingTop而不會檔住狀態(tài)欄，所以這個paddingTop只需要給iOS設置就可以了。接下來我們來使用Platform來實現(xiàn)這個功能。

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

相關文章：

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