公西雒的技术站

随着对react native的深入学习和实战积累的开发经验，我已经重新建立了一个新项目react-native-boilerplate-dolphin。此项目是一个rn app的模板项目，可用于学习和二次开发。github项目地址https://github.com/afresh/tadpole目录1.创建项目2.添加内容页3.集成第三方路由和tab页4.自定义T...

由于博主没有ios环境，所以本项目均以安卓环境进行，ios环境请各位自行打包测试。本项目github地址：https://github.com/afresh/tadpole随着对react native的深入学习和实战积累的开发经验，我已经重新建立了一个新项目react-native-boilerplate-dolphin。此项目是一个rn app的模板项目，可用于学习和二次开发。...

我们需要先写几个tab的内容页和其他页面，来为下一节集成路由和tab做个铺垫。先来看一下项目结构如图添加一个home.js文件作为tab的内容页，代码如下import React, { Component } from 'react';import { StyleSheet, View, Text,} from 'react-native';export defau...

这里需要用到两个第三方插件：react-native-router-flux 路由，https://github.com/aksonov/react-native-router-fluxreact-native-scrollable-tab-view 选项卡，https://github.com/skv-headless/react-native-scrollable-tab-viewprop-t...

关于如何集成TabBar，请看上一节《【搭建react-native项目框架】3.集成第三方路由和tab页》本节只讲解如何自定义TabBar的中间按钮，以及播放时旋转动画的实现。关于动画与播放器的集成可以参考https://github.com/pheromone/react-native-videoDemo，但这个项目目前安卓存在bug，所以我只借鉴了动画部分。还是先来看效果图...

我们经常需要执行耗时较长的代码。为了良好的用户体验，我们在异步处理耗时代码时，采用Loading加载动画的形式来等待处理。这里参考了《React native Model组件的使用》。1.在components下新建loading.js文件，如下/** * 调用说明： * <Loading ref={r=>{this.Loading = r}} hide = {true} /&gt...

在移动端，Toast方式提示消息更为普遍。安装插件react-native-easy-toast，github地址：https://github.com/crazycodeboy/react-native-easy-toast，中文文档：https://github.com/crazycodeboy/react-native-easy-toast/blob/master/README.zh.md$...

此节用到了第三方路由react-native-router-flux，关于集成路由请移步《【搭建react-native项目框架】3.集成第三方路由和tab页》。1.在components内添加header.js文件import React, { Component } from 'react';import { Platform, StyleSheet, Touchab...