您的位置:首页 > 移动开发

基于iOS和Android的react-native跨平台漫画App

2017-04-12 21:35 711 查看


ComicBook

ComicBook
项目参考了ComicApp的部分设计和部分代码,
ComicBook
ComicApp
的重构版。本项目架构清晰,代码简洁,还配套完整的视频。http://yiqizhongchuang.cn/iosandroidreact-nativeapp?utm_source=tuicool&utm_medium=referral


项目使用须知

$ git clone https://github.com/liyuechun/ComicBook.git[/code] 
$ cd ComicBook

$ npm install


如下图打开项目配置文件



配置说明

import {
Platform
} from 'react-native';

/**
* 运行项目注意事项
* 1、请移步:https://www.juhe.cn/docs/api/id/163
* 2、注册账号
* 3、申请数据,免费可以访问1000次,如果想花钱,可以花99元买20000次,
* 不想花钱,直接换个手机号再注册申请即可
* 4、把申请的key替换掉下面的key
*/

/**
* 备用key
* 8f28c126609a563c7ce16f6a83369459
* ed273dc45c5042836181c2356b81db63
*/

/**
* 将你申请的key替换掉下面的key
*/
export const KEY = "8f28c126609a563c7ce16f6a83369459";

/**
* Android端是否以抽屉样式展示
*/
const SHOW_ANDROID_DRAWER = true;
// const SHOW_ANDROID_DRAWER = false;

/**
* iOS端是否以抽屉样式展示
*/
const SHOW_IOS_DRAWER = true;
// const SHOW_IOS_DRAWER = false;

export const IS_TAB_STYLE = Platform.OS === 'ios' && !SHOW_IOS_DRAWER || Platform.OS !== 'ios' && ! SHOW_ANDROID_DRAWER;


运行项目

$ react-native start
$ react-native run-ios
$ android avd //启动android模拟器
$ react-native run-android


Android && iOS端抽屉效果







Android && iOS 抽屉效果主页







Android && iOS TabBar主页效果







其他页面效果





















第三方库

StackNavigator
TabNavigator
DrawerNavigator
Redux
redux-thunk
react-static-container
react-native-viewpager
react-native-sglistview
react-native-scrollable-tab-view


TODOS

mobx版本的ComicBook
Weex版本的ComicBook
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: