ReactNative
文章平均质量分 68
zhang___yong
安卓菜鸟,大学生一枚
展开
-
ReactNative学习实例(二)输入框,滚动条,列表的简单使用
使用这些组件都需要在开头的声明模块进行引入。例子摘自RN中文网1.文本输入框TextInput:常用的几个属性有:(1)placeholder:默认显示文字,相当于安卓的hint(2)onChangeText:这个属性接收一个方法,方法传入一个文本类型的参数也就是当前输入的文字,这也是唯一能够获取当前文本内容的途径。每次输入内容改变时调用 (3)onSubmitEditi转载 2017-03-01 12:36:58 · 2781 阅读 · 0 评论 -
ReactNative学习实例(九)数据永久化存储AsyncStorage
官方的使用文档在这里http://reactnative.cn/docs/0.43/asyncstorage.html#contentAsyncStorage使用类似于安卓中sharedpreference的存储逻辑,从名字中就可以看出这是异步存储。调用的所有方法返回一个Promise对象,但是不需要对这个对象进行操作,因为方法接受回调方法等参数,在这些方法中对数据进行存取即可。原创 2017-04-06 21:24:11 · 1376 阅读 · 0 评论 -
ReactNative学习实例(八) 第三方组件TabNavigator底部导航栏
TabNavigator是github上开源的一个rn组件,是适用于ios和安卓两个平台的底部导航栏。组件地址:https://github.com/expo/react-native-tab-navigator1.首先通过命令行将组件引入项目:进入项目根目录并执行npm install react-native-tab-navigator --save执行完毕后组件就已导入,原创 2017-04-05 18:39:55 · 14410 阅读 · 1 评论 -
ReactNative学习实例(五)Picker和ProgressBar
1.Picker主要实现三个属性:selectedValue绑定选择的变量,mode有dropdown和dialog两种,分别是下拉式和对话框式,onChangeValue接收一个方法,每次选择的值改变时调用,方法有一个参数表示选择的值Picker要选择的元素以Picker.Item组件的形式作为他的子组件,有label和value两个属性,label是显示的值,value是传入方原创 2017-03-03 15:32:46 · 574 阅读 · 0 评论 -
ReactNative学习实例(十)接管Back键BackAndroid&&ToastAndroid
转自东方耀的学习视频下面的这个例子实现了双击退出和类似于引导页的在第二页退出。首先为BackAndroid设置监听器:componentWillMount() { BackAndroid.addEventListener('listener',this.onBackPressed); } componentWillUnMount() {转载 2017-04-07 18:04:23 · 597 阅读 · 0 评论 -
ReactNative学习实例(七)ViewPagerAndroid
ViewPager也算是比较常用的,比如引导页和轮播图。先来看他的几个属性:1.initialPage={0},初始页的序号,从零开始,不设置的话默认是0。2.onPageScroll。接收一个方法,方法有一个event参数,通过event.nativeEvent.position可以拿到当前页码,通过event.nativeEvent.offset拿到偏移量。滑动时调用3.onPag原创 2017-03-06 17:15:10 · 539 阅读 · 0 评论 -
ReactNative学习实例(六)DrawerLayoutAndroid(侧滑菜单)
DrawerLayoutAndroid的子组件作为视图的主要内容,通过他的renderNavifationView来渲染侧滑菜单。DrawerLayoutAndroid主要有三个属性:1.drawerPosition,菜单从哪边滑出,接收几个常量:DrawerLayoutAndroid.positions.Left表示在左边,默认左边2.drawerWidth:菜单宽度,没有必要设原创 2017-03-05 16:40:53 · 568 阅读 · 0 评论 -
ReactNative学习实例(四) 使用Navigator实现页面跳转和信息传递
Navigator管理页面的原理是借助页面栈,显示另一个页面就让这个页面入栈,返回的话就让他出栈。相比于安卓里活动之间的跳转,navigator显得非常灵活,如果将navigator作为根容器的话,那么每次跳转就是整个视图的跳转。但是也可以仅仅将navagator作为视图的一部分,比如我把视图里的组件A换成组件B。实际上,整个场景就是一个铺满的组件。下面这个例子转自https://github转载 2017-03-02 14:46:18 · 465 阅读 · 0 评论 -
ReactNative学习实例(三) 使用fetch获取网络数据
实例来自http://blog.csdn.net/u014360817/article/details/52447516RN自带了一个非常优雅的网络操作库fetch,下面的这个例子从gankio的接口拿到了美女图片的url然后通过state 传给列表组件,列表里返回图片组件显示图片。网络数据获取方法写在componentDidMount中,这个方法是组件生命周期中需要调用的一个方法。转载 2017-03-01 14:53:01 · 7401 阅读 · 0 评论 -
ReactNative学习实例(一)动态变化的state
实现一个闪烁的文本效果,该实例摘自RN中文网:/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';//引入需要的组件,文本框等,这里多引了几个import { AppRegistry, T转载 2017-02-27 11:44:14 · 2120 阅读 · 1 评论 -
react native接入原生项目(mac pro)
首先保证安装了node,watchman,yarn。1.新建一个文件夹A,里面新建一个文件夹android,然后把项目根目录下所有内容放入这个android里。直接全选复制的话没有git,可以把整个项目移过去再改名为android。2.在A下新建package.json:{ "name": "EffectCam", "version": "0.0.1", "private...原创 2018-09-03 16:53:22 · 223 阅读 · 0 评论