![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React Native学习笔记
蓋亞光
积跬步以至千里
展开
-
React Native Android(一) 新建项目,运行,错误解决
一、新建项目: 1.打开命令行窗口(windows+R); 2.切换到要创建项目的目录; 3.创建项目(react-native init MyRNProject) 这个可能要等待几分钟,直到界面显示如下: 至此,项目创建成功。 二、运行: 1.切换到项目根目录下,然后执行react-native run-android命令: 稍等片刻,看到: 则编译运行成功,原创 2017-03-15 19:53:20 · 2369 阅读 · 0 评论 -
React Native LayoutAnimation动画
在React Native中,LayoutAnimation用于在页面布局发生改变时,添加动画效果。 LayoutAnimation使用简单,要实现动画效果只需要在setState()前添加LayoutAnimation动画方法://添加一张图片 _addImg() { //LayoutAnimation.easeInEaseOut();//在setState()前,添加L原创 2017-05-18 17:00:19 · 3097 阅读 · 0 评论 -
React Native Realm数据库存储
前言: Realm 是一个专门针对移动平台设计的数据库,具有:1、简单易用;2、跨平台;3、高性能;4、提供高级功能等优点。Realm在设计之初为了彻底解决性能问题,核心数据引擎用c++打造,并不是建立在SQLite上的ORM,因此性能就比普通的ORM快很多,甚至比单独无封装的SQLite还要快。 下面我们通过一个本地数据库存储的实例来一步步学习Realm的使用规则。 一、环境 1、Real原创 2017-05-15 16:27:17 · 2681 阅读 · 0 评论 -
React Native Get,Post请求
React Native为我们提供了fetch框架进行网络请求。Fetch请求static async request(url, method, body, params) { DEBUG && console.log("#REQUEST NetUtil# [" + method + "] url=" + url + ",body=" + body); var tim原创 2017-05-05 15:01:19 · 2876 阅读 · 0 评论 -
react-native 滑动标题栏
在我们的应用中经常有上面显示一行标题栏,下面分别每个标题对应一个页面,标题栏与页面联动的情形,在Android中我们可以简单用Toolbar和ViewPager来实现,react-native中至今还没有提供原生的组件供我们来应用,但我们可以通过依赖github大神skv-headless的react-native-scrollable-tab-view(https://github.com/skv原创 2017-05-05 11:18:39 · 3921 阅读 · 0 评论 -
React Native Webview使用
RN为我们提供了WebView组件来加载一个网页。/** * Created by gyg on 2017/5/4. */'use strict'import React, {Component} from 'react';import { StyleSheet, View, Text, WebView, BackAndroid,} from 'r原创 2017-05-12 18:16:01 · 4423 阅读 · 0 评论 -
React Native 弹出框
RN为我们提供了一个跨平台通用的Modal组件,我们可以用它来实现一个弹出框的视图。 先上效果图: 代码如下:/** * Created by gyg on 2017/5/11. * 自定义弹出框组件 */'use strict'import React, {Component} from 'react';import { StyleSheet, View,原创 2017-05-12 15:25:43 · 5578 阅读 · 0 评论 -
react-native listview使用
listview是我们应用中的一个组件,用它我们可以展示列表数据。react-native为我们提供了ListView组件,方便我们实现列表数据展示。1.引入ListView组件:import { StyleSheet, ListView, View, Text, Image}from 'react-native';2.构造函数中初始化ListView的数据原创 2017-05-03 16:53:21 · 2082 阅读 · 0 评论 -
react-native tab标签
现在,我们的app中一般都要有底部导航栏的存在,但react-native并没有给我们提供原生的实现,github上有大神实现了相关模块(https://github.com/expo/react-native-tab-navigator),使用起来非常方便。 首先,我们要切换到我们的工程目录下面: 运行 npm install react-native-tab-navigator –sav原创 2017-05-03 16:20:20 · 2057 阅读 · 0 评论 -
React Native Android(二)Navigator知识点
知识点: Navigator 是React-Native原生的,跨平台的导航器组件。Navigator会维护一个路由栈,并提供一系列api帮助开发者完成程序内不同页面之间的跳转及参数传递。 Route 是标识导航器渲染标识每一个页面的对象。getCurrentRoutes() 返回当前的路由栈列表信息。push(route) 将route压入路由栈,跳转到route指定的页面。pop()原创 2017-05-03 15:16:38 · 718 阅读 · 0 评论 -
React Native Animated动画
在React Native中,我们可以通过两种方式实现一个动画效果:LayoutAnimationAnimated关于LayoutAnimation,我之前写过一篇学习博客(React Native LayoutAnimation动画)。此主要用于在页面布局改变的时候添加一些动画效果,但如果想要实现一些更精细,复杂的动画,LayoutAnimation就会比较困难,所以React Native原创 2017-05-22 12:58:49 · 2254 阅读 · 1 评论