ReactNative
梦想之家xiao_chen
一起学习
展开
-
ReactNative调用Native(Android)
这样在JavaScript层就可以直接调用Android中的Native方法.但在大部分的方法调用中,都需要知道调用方法之后的处理结果是什么,有没有出现异常等情况。JavaScript本身是事件驱动的语言,需在JavaScript中可以使用回调方法来处理函数返回的结果。同样地在react-native中定义了Callback和Promise的接口,用来处理JavaScript调用Java方法的转载 2017-01-18 15:46:59 · 296 阅读 · 0 评论 -
ReactNative 请求网络数据工具类。
ReactNative 请求网络数据工具类。/** * Created by chenjialin on 17/3/29. */'use strict';import React, {Component} from 'react'class NetUtils extends React.Component { //post请求 static原创 2017-03-29 17:31:14 · 635 阅读 · 0 评论 -
react-native组件Button封装与传值
感觉React native开发就是要先写组件(component),然后用组件去组装页面。组件写好了,后续开发就简单多了。不多说了。 1.下面介绍下自定义圆角Button的封装。/** * Created by chenjialin on 17/3/30. */'use strict';import React, { PureComponent,Compo原创 2017-03-30 10:32:10 · 2853 阅读 · 0 评论 -
ReactNative自定义控件。
在android /ios /RN自定义组件,是每位程序员开发重要性。 我们知道,自定义组件是很多自带的控件加上有点逻辑代码完成。 今天给大家介绍是ReactNative自定义控件,主要是介绍的类似ios UITableViewCell / android ListView Item。 代码如下:ProfileStaticCell titl原创 2017-03-23 14:41:00 · 602 阅读 · 0 评论 -
ReactNative集成到android项目中注意的问题。
一.在app文件夹中build.gradle下配置.1. React-Native中是需要ndk技术。 在android studio 中配置Android ndk 第三方包, 如下配置 :在android studio 中File---Other Settings --Default Project Structure...中原创 2017-03-14 09:55:18 · 346 阅读 · 0 评论 -
在 Fragment 中使用 React Native
1.Applications 实现 ReactApplication 的抽象方法 getReactNativeHost,加载jsx资源 。package com.silabs.reactnativeappdemos;import android.app.Application;import com.facebook.react.ReactApplication;import原创 2017-03-14 10:34:14 · 2809 阅读 · 0 评论 -
React Native三方组件之scrollable-tab-view
使用介绍scrollable-tab-view 是RN的第三方组件,使用的时候我们需要做的是用npm导入到项目的组件管理文件夹下组件下载地址:https://github.com/skv-headless/react-native-scrollable-tab-view安装方法:1:终端窗口"cd 项目工程目录里"执行命令:npm install react-native原创 2017-03-24 11:33:31 · 3411 阅读 · 0 评论 -
有效好用组件之启动屏react-native-splash-screen
详细的介绍react-native-splash-screen。一、下载 React-native-splash-screen在项目根目录打开终端运行 npm react-native-splash-screen --save 二、安装(自动安装或手动安装) 自动安装终端运行: rea原创 2017-04-11 11:42:11 · 6875 阅读 · 0 评论 -
ReactNative出现错误问题'React/RCTBridgeModule.h' file not found
'React/RCTBridgeModule.h' file not found解决的方法:#import 把修改为#import "RCTBridgeModule.h"原创 2017-03-16 17:32:21 · 21084 阅读 · 0 评论 -
mac 查看端口使用情况
输入命令lsof -i tcp:8081(注8081是端口号,你想看其它的话可以改)以查看该端口被什么程序占用,并显示PID,方便KILL lsof介绍1)lsof(list open files)是一个列出当前系统打开文件的工具。2)lsof语法格式是:lsof [options] filename2)查到之后如果你想kill,输入命令kill进程(PID)比如 kill 5...原创 2018-05-22 13:04:40 · 4026 阅读 · 0 评论 -
react-native 打包apk 之 安卓离线包全过程
(1)首先在./android/app/src/main/中创建文件夹assets。(2)就开始我们的离线包打包命令:react-native bundle --entry-file index.js --platform android --dev false --bundle-output ./android/app/src/main/assets/index.android.bundle -...原创 2018-05-24 10:43:49 · 725 阅读 · 0 评论 -
webstorm 中 ReactNative 设置代码智能提示
ReactNative 代码智能提醒 (Webstrom live template)git clone https://github.com/virtoolswebplayer/ReactNative-LiveTemplate说明ReactNative的代码模板,包括:组件名称Api 名称所有StyleSheets属性React组件安装方法一 file -> import sett...转载 2018-05-24 11:01:29 · 2407 阅读 · 1 评论 -
ES6中Json、String、Map、Object之间的转换
ES6中Json、String、Map、Object之间的转换在请求服务器的数据时,经常对json数据解析。/** * Created by chenjialin on 17/3/29. */'use strict';import React, {Component} from 'react'/** *JsonUitl的实现 */clas原创 2017-03-29 13:45:03 · 31223 阅读 · 0 评论 -
ReactNative多继承方法
今天告诉你们ReactNative 多继承的实现。 用检验是否存在网络为例子如下:1.这个NetInfoDecorators类就是父类,专门检测是否存在网络。 /** * Created by chenjialin on 2017/3/27. */import React, {Component} from 'react'import {NetInfo原创 2017-03-29 10:57:03 · 2276 阅读 · 0 评论 -
React Native调试技巧与心得
在做React Native开发时,少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功,高效的调试不仅能提高开发效率,也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。Developer MenuDeveloper Menu是React Native给开发者定制的一个开发者菜单,来帮助开发者调试React Nat转载 2017-03-22 09:46:39 · 926 阅读 · 0 评论 -
React Native经常用的命令
(一)React Native 经常用的命令 首先我们需要查看本地的React Native的版本,命令行输入如下命令: react-native -version 如果之前我们是按照我前面的文章(点击进入React Native环境搭建)直接命令行npm install -g react-native-cli创建的话,那么应该会出现如下的原创 2017-02-28 09:23:23 · 460 阅读 · 0 评论 -
【React Native】iOS离线打包
我们可以用React Native提供的命令:react-native bundleOptions:--entry-file Path to the root JS file, either absolute or relative to JS root [required]--platform Either "ios" or "android"--transformer Specif转载 2017-02-23 16:12:06 · 988 阅读 · 0 评论 -
React Native学习之调用Android自定义view
Android是一个开源的项目,有许多丰富并且功能强大的第三方自定义控件,那么React Native如何调用Android自定义的控件呢?请听我娓娓道来。 这里就不讲究如何自定义Android控件,假设你是一位Android经验丰富的人。Android端代码:先看下待React-Native调用的Android自定义控件:public class CircleView e转载 2017-02-23 16:21:56 · 530 阅读 · 0 评论 -
Android原生APP中添加ReactNative 进行混合开发教程
参考官方文档->react native 文档本文使用开发环境 Android studio注意最新的React Native支持的最新的SDK为16(android4.1)npm环境,小伙伴们自己安装 nodeJS自己安装,可以参考官方文档安装环境.创建Android项目(已有项目跳过)打开Android studio147转载 2017-02-23 16:29:20 · 1198 阅读 · 0 评论 -
使用 MobX 集成React Native 应用开发
学习使用 MobX 和 React Native 的一个不错的零点开始。 1.我们先要创建一个 React Native react-native init ReactNative_MobX 2.接下来,我们进入目录下,并安装需要的依赖:mobx 和 mobx-react。npm i mobx mobx-react --save原创 2017-03-03 14:30:28 · 1391 阅读 · 0 评论 -
React Native 集成到原生项目(iOS)
想了很久,要先介绍各种组件的实际应用好,还是先介绍怎么把React Native集成到原生项目好。因为想起,一旦开始写各种组件的应用,就会花很长很长的篇幅,会把这个挺重要的内容抛到好远,而集成到原生项目又是很多人所需要学习的(像我一样哈,直接替代现有的项目是不科学的,作为一个模块集合进去才比较现实),所以决定了,还是先花两个篇章写写怎么将React Native集成到原生项目以及JS与转载 2017-02-24 16:18:55 · 523 阅读 · 0 评论 -
ReactNative 在Xcode 中注意事项。(重点)
今天尝试打包及在真机上离线运行,还是出现『RCTRootView.h file not found』的问题,后来发现需要把 Building Setting 里的Header Search Paths属性的值 "${PODS_ROOT}/Headers/Public/React" - not-recursive 改为 recursive 就可以了,由于Pods里的React结构改变了,但配置没有原创 2017-02-24 16:30:32 · 2146 阅读 · 0 评论 -
React Native 与原生之间的通信(iOS)
本文将讲述下在原生和React Native之间的通信方式。方式和逻辑综合了自己的思维方式,主要参考了React Native中文官方文档,因为感觉它讲的方式有些不妥,所以就按自己思路组织了下文。虽然发觉一遍文章要把所有通信方式讲清楚不太科学,不过把思路讲讲倒是可以,总体思路是,原生和React Native之间的通信方式主要包括三大部分:属性原生模块原生UI组件封装(下文转载 2017-02-24 16:49:47 · 7245 阅读 · 0 评论 -
译错误Conflict with dependency 'com.google.code.findbugs:jsr305'
提示错误:Warning:Conflict with dependency 'com.google.code.findbugs:jsr305'. Resolved versions for app (3.0.1) and test app (2.0.1) differ. See http://g.co/androidstudio/app-test-app-conflict for detail原创 2017-03-09 11:31:50 · 309 阅读 · 0 评论 -
React Native 封装原生UI组件(iOS)
原生开发,发展到今天已经非常成熟完善,已有组件成千上万,极大的提高了开发效率。而React Native 在Facebook的React.js conf 2015上提出,至今一年多,组件数目肯定没得和原生的相比。因此,在使用React Native开发App的过程中,我们可能需要调用RN没有实现的原生视图组件或第三方组件。甚至,我们可以把本地模块构造成一个React Native组件,提供给别转载 2017-02-27 15:33:40 · 5772 阅读 · 0 评论 -
Component 组件的详细说明和生命周期
组件的详细说明和生命周期(Component Specs and Lifecycle)Edit on GitHub组件的详细说明(Component Specifications)当通过调用React.createClass()来创建组件的时候,你应该提供一个包含 render方法的对象,并且也可以包含其它的在这里描述的生命周期方法。render转载 2017-03-28 14:52:12 · 24116 阅读 · 0 评论 -
React Native开发错误警告处理总结
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者。文中有不妥的地方希望指出共同学习,同时欢迎大神补充。错误1:Paste_Image.png估计是程序中有格式错误请自行检查比如:你注释出来问题。{/*title="张三"*/}换//title="张三"错误2:Paste_Image.png这个说明你要跳转的页面缺少子控件。所以你要在里面添加东西比如加个:<...转载 2018-06-15 11:54:39 · 7914 阅读 · 0 评论