本教程内容和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 (
<View>
<Header />
<View>
<Text>我是Content</Text>
</View>
<Footer />
</View>
);
}
}
// 导出这个模块，供外部调用
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 (
<View>
<Text>我是Header</Text>
</View>
);
}
}
// 导出这个模块，供外部调用
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 (
<View>
<Text>我是Footer</Text>
</View>
);
}
}
// 导出这个模块，供外部调用
export default Footer;
第二次运行
StyleSheet
我们需要修改一下样式，
- Header把系统状态栏档住了
- 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 (
<View style={styles.container}>
<Header />
<View style={styles.content}>
<Text>我是Content</Text>
</View>
<Footer />
</View>
);
}
再次运行，结果如下：
看一下在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
相关文章：
