React Native项目实践

特别说明：本次实践以Android平台进行

1.项目设计

image.png

仿豆瓣App，包含2个大模块：电影和图书，每个模块都含有列表页面(带有搜索功能)和详情页面，其中图书的详情页面用自定义组件，电影的详情使用Web View。

2.技术设计

模块划分

• 公共模块

1.工具类 utils.js
网络请求方法
获取屏幕size
loading组件
返回键组件
2.API列表 service.js
电影列表
电影详情
图书列表
图书详情
3.导航组件 Navigator.js
每个页面都需要导航组件
4.头组件 Header.js
详情页面都需要展示带有返回键的Header组件
5.搜索框组件 SearchBar.js
列表页面都需要搜索框
6.详情组件 DetailView.js
通过DetailView组件加载详情信息

• 电影模块

1.电影列表 MovieList.js
2.列表行组件 MovieItem.js

• 图书模块

1.图书列表 BookList.js
2.列表行组件 BookItem.js
3.图书详情 BookDetail.js

创建项目工程

react-native init HuaBan

得到一个初版的项目工程。

image.png

android 和 ios文件夹中 对应的是原生代码，分别可以通过 Android Studio 和 Xcode打开，目前里面自动生成一些初始化代码，项目用到混合开发的时候会用到。
node_modules 里面内容是项目依赖文件。
package.json 是项目说明文件。所有相关信息，包括作者、简介、包依赖、构建等信息，格式是严格的JSON格式。
index.js 是程序的入口文件，里面引入了 App.js 文件 ，并注册了应用

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

通过以下命令运行项目

react-native run-android

可以先不纠结一些详细的东西，先把整体的一个框架整出来。
首先，将App.js中的模板内容去掉，添加我们自己的内容。