简述 要实现微信性别选择需要使用两部分的技术: 第一.是自定义弹出框: 第二.单选框控件使用: 效果 实现 一.配置弹出框 弹出框用的是:react-native-popup-dialog(Git地址:https://github.com/jacklam718/react-native-popup-dialog) 具体配置见Git文档~ 二.配置单选框 用的是:react-native-elements(Git地址:https://react-native-training.github.io/

React Native 自定义 底部选择框 实现 效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from 'react'; import {Dimensions, Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; const {width} = Dimensions.get('window'); export def

React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; import {View, Text, Image, StyleSheet, TouchableOpacity, Platform, Dimensions} from 'react-native'; /** * 自定义导航栏 */ let height = (Platform.OS === : ) +

之前我们学习了可触摸组件和页面导航的使用的使用: 从零学React Native之09可触摸组件 - 从零学React Native之03页面导航 - 经过之前的学习, 我们可以完成一个自定义导航栏了, 效果如下: 我们需要创建一个 NaviBar.js 用来显示顶部的导航栏, 还需要四个界面(Page1.js,Page2.js,Page3.js,Page4.js). 当然还需要修改index.android.js或者index.ios.js 用来处理4个界面的切换. 导航栏NaviBar 实现

Navigator和NavigatorIOS 在开发中,需要实现多个界面的切换,这时候就需要一个导航控制器来进行各种效果的切换.在React Native中RN为我们提供了两个组件:Navigator和NavigatorIOS. 关于Navigator的介绍请查看之前的介绍文章:http://blog.csdn.net/xiangzhihong8/article/details/52624367 在使用Navigator导航器的时候需要重点掌握Navigator的几个方法: getCurrent

概述 在 前期介绍React Native 项目结构的时候,我们讲解过React的项目组成,其中说过 node_modules 文件夹,这是一个存放 node 模块的地方.我们知道React是用npm来管理项目的.提到npm,一般指两层含义:一是 Node.js 开放式模块登记和管理系统,另一种是 Node.js 默认的模块管理器,是一个命令行软件,用来安装和管理 node 模块. npm 使用介绍 npm 是一个 Node.js 模块,安装 Node.js 会默认安装 npm,可以在终端中使用

React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton) 一,需求与简单介绍 在开发项目时发现RN没有给提供RadioButton和RadioGroup这两个组件,只有CheckBox组件(不支持iOS),但是项目中确实有有一些地方需要使用到RadioButton和RadioGroup,比如默认地址的选择等. 需求: 可以指定选中状态和未选中状态的颜色. 可以指定该单选按钮是否可选:disabled. 可以指定整体的样式,就像使用系统

本篇主要介绍: 1. 自定义组件 2. Alert 对话框 自定义对话框 之前的我都是利用React Native提供的基础组件对它们进行排列组合, 其实自定义也很简单, 我们还是拿上一篇文章的例子进行扩展. 当我们点击注册的时候,可以弹出一个对话框,让用户确认一下,如下图: 接下来就来试试, 首先在项目目录下创建ConfirmDialog.js 代码如下: import React, { Component } from 'react';import { StyleSheet, Text, /

React Native实战系列教程之自定义原生UI组件和VideoView视频播放器开发   2016/09/23 |  React Native技术文章 |  Sky丶清|  4 条评论 |  11232 views   尊重版权,未经授权不得转载 本文来自:画虎烂的专栏(http://blog.csdn.net/it_talk/article/details/52638456) (一)原生UI组件之VideoView视频播放器开发 React Native并没有给我们提供VideoView

代码地址如下:http://www.demodashi.com/demo/11686.html 这次我们要做的仿 新闻头条 的首页的顶部标签列表,不要在意新闻内容. 请求数据 首先做顶部的目录视图,首先我们先获取数据: 在 Home.js 中加入方法: componentDidMount() { let url = 'http://api.iapple123.com/newscategory/list/index.html?clientid=1114283782&v=1.1' fetch(url

这是2017年年初开始的公司的项目,对于导航条的要求很高,Android和iOS上必须用一致的UI,按钮位置还有各种颜色都有要求,而且要适应各种奇葩要求. 尝试了一下当时React Native自带的导航,完全不符合要求,于是自己手写了一个导航. Github地址:github.com/gaoxiaosong- 目前支持如下功能: 横屏和竖屏模式. 安全区域支持. Android和iPhone X的支持. absolute布局支持. 回退按钮自动执行. 标题是否居中. 导航条下方分隔线. 自定义

React Native在iOS界早就炒的火热了,随着2015年底Android端推出后,一套代码能运行于双平台上,真正拥有了Hybrid框架的所有优势.再加上Native的优秀性能,让越来越多的公司在实际项目中一探究竟.58同城APP发布模块年代久远,一直计划进行重构以适应日益苛刻的用户体验,这个需求与我们在React Native上一探究竟的意愿一碰撞,就产生了React Native在58APP的开发实践. 本文重点介绍的是实践过程中的技术架构和Native组建层以及热更新平台的基本情况,

这是我技术公众号的第一篇文章,也是React Native系列文章的第一篇,对我的文章感兴趣的可以加我微信16230091进行关注. 本文表面上讲React Native(以下简称RN),实际上对于学习任何语言和系统都适用. 对于新技术的学习,分为两种,一种是语言,类似Swift.Objective-C.Java.ES6,另一种是系统,比如Android.iOS.前端. 1. 语言层面,如果你精通某一门语言,那么是可以很快切换到另一门语言的.这就是语言的相通性.翻开市面上那些21天精通某某语言之

本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长”这是大家共同的理想.除了每天忙于工作外,我们都希望能更多地区吸收领域内的新知识与新技能,从而走向人生巅峰. Dev Club 是一个交流移动开发技术,结交朋友,扩展人脉的社群,成员都是经过审核的移动开发工程师.每周都会举行嘉宾分享,话题讨论等活动. 上一期我们邀请了腾讯SNG工程师“王少鸣”分享了

前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. PS:任何新技术的尝鲜都一定要控制在自己能控制的范围内,失败了会有可替换方案,不要引起不可逆的问题,这样会给团队造成灾难性的后果. 事实上,RN经过一段时间发展,已经有充分数量的人尝试过了,就我身边就有几批,褒贬也不一: ① 做UI快 ② 还是有很多限制,不如原生Native ③ 入门简单,能让前端快

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 TabBarIOS 组件简介 目前的APP内,大部分都是选项与选项之间切换,比如:微信.微博.QQ空间-,在iOS中,我们可以

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 ListView组件介绍 ListView组件是React Native中一个比较核心的组件,用途非常广,设计初衷就是用来高效

前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢 React Native组件化介绍 React Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方

今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下,跟props一样都是 this.props.propertyName this.state.stateName 这种形式,props和state是控制组件的两种类型,props是开发者自定义的组件参数,state表达的是一种状态用于控制组件的内容 /** * Sample React Native

在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用它,只是有时安装库很慢,还不如复制粘贴库来的快,就删除它了,这里就使用手动集成的方式吧. 1. 新增React Native文件路径和json说明文件,进入项目根目录(*.xcodeproj文件所在目录): mkdir reactnative cd reactnative vim package.json  

React Native目前有几个内置的导航器组件,一般来说我们首推Navigator.它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作 场景简单来说其实就是一个全屏的React组件.与之相对的是单个的Text.Image又或者是你自定义的什么组件,仅仅占据页面中的一部分. 下面我们来定义一个仅显示一些文本的简单场景.创建一个名为"MyScene.js"的文件,然后粘贴如下代码: import React, { Component } from 'react'; imp