基于react-native android的新闻app的开发

最新推荐文章于 2019-04-08 09:41:49 发布

转载最新推荐文章于 2019-04-08 09:41:49 发布 · 307 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuwanyu/p/4929590.html

文章标签：

#移动开发 #操作系统

本文分享了基于React Native在Android平台开发电影应用的全过程，包括项目结构、关键页面实现及遇到的技术挑战。从SplashScreen到新闻列表、新闻详情、Drawer导航、电影列表等页面，详细介绍了ListView、WebView、Navigate、AsyncStorage等组件的使用，并探讨了图片轮播、下拉刷新等功能的待解决策略。

使用平台：android

代码获取地址：https://github.com/wuwanyu/ReactNative-Android-MovieDemo

项目展示：

结构图：

SpalashScreen(幻灯片)
首页（新闻列表）：
新闻详情页：
Drawer页：
电影列表页：

解决问题：

ListView，Drawer，WebView，Navigate，AsyncStorage，splash animation

未解决问题：

图片轮播，下拉刷新，页面切换时的滑动效果

开发react-native android版本须知：

（1）配置react-native 安卓运行环境

（2）启动项目步骤：

使用cmd命令行，进入工程目录，运行    
node node_modules\react-native\packager\packager.js

保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行
react-native run-android

(3) 创建项目步骤：

进入你的工作目录，运行
react-native init ProjectName

使用cmd命令行，进入工程目录，运行（打开vpn，否则会报错；）
node node_modules\react-native\packager\packager.js


保持packager开启，另外打开一个命令行窗口，然后在工程目录下运行
react-native run-android

参考：

github煎蛋实例

facebook.github参考文档

Windows下搭建React Native Android开发环境

React-Native android在windows下的踩坑记

转载于:https://www.cnblogs.com/wuwanyu/p/4929590.html