React Native实战开发3：模块划分

本教程内容和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);

我们在项目根目录创建三个js文件，分别是：

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

接下来我们分别创建这三个文件。

---

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 {
  /*
   实现App类的render方法，这个方法返回一个View，
   其组成分别是Header, Content和Footer
   */
  render() {
    return (
      
        

        
          我是Content
        
        

      
    );
  }
}

// 导出这个模块，供外部调用
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 {
  /*
   实现Header类的render方法，这个方法返回一个View，显示Footer
   */
  render() {
    return (
      
        我是Header
      
    );
  }
}

// 导出这个模块，供外部调用
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 {
  /*
   实现Header类的render方法，这个方法返回一个View，显示Footer
   */
  render() {
    return (
      
        我是Footer
      
    );
  }
}

// 导出这个模块，供外部调用
export default Footer;

---

第二次运行

StyleSheet

我们需要修改一下样式，

1. Header把系统状态栏档住了
2. Content需要弹性高度

修改app.js代码，导入StyleSheet

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

使用StyleSheet.create()创建一个styles对象

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

然后，分别给最外层的View以及content的View设置style属性。

render() {
  return (
    
      


      
        我是Content
      

      

    
  );
}

再次运行，结果如下：

看一下在Android上运行的样子：

注意，在Android上运行的时候，Header离状态栏距离太大了，因为Android不需要设置paddingTop而不会档住状态栏，所以这个paddingTop只需要给iOS设置就可以了。接下来我们来使用Platform来实现这个功能。

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实战开发1：搭建开发环境
2. React Native实战开发2：布局
3. React Native实战开发3：模块划分
4. React Native实战开发4：属性和状态
5. React Native实战开发5：使用TextInput
6. React Native实战开发6：使用ListView
7. React Native实战开发7：使用Switch更新todo complete状态
8. React Native实战开发8: 删除todo item