React-native 作为facebook开源项目,最近是火的一塌糊涂,它采用node.js能够写ios和android的native界面代码,简直是太酷了.支持动态更新,而且appstore 提交不会拒绝. 学习新的技术都是从HelloWorld开始的,我们先搞个HelloWorld看看React-native. 一,环境配置(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦.(2)在Mac上安装Xcode,建议Xcode 6.3以上版本(3)安装brew ,mac 上命令行的…

<ignore_js_op>      源码下载:http://code.662p.com/view/13343.html     作者ymcao,源码TopNewsIOS,新闻头条IOS版本集成React远程离线包, 头条IOS+ReactNative混合版本(Layout采用Masonry) 用Masonry来做IOS UI AutoLayout适配,并初步实现React Native的离线包下载,然后解压到沙盒目录,可用未来IOS插件化工作! IOS原生工程集成React Native…

iOS React-Native入门指南之HelloWorld React-native 作为facebook开源项目,最近是火的一塌糊涂,它采用node.js能够写ios和android的native界面代码,简直是太酷了.支持动态更新,而且appstore 提交不会拒绝. 学习新的技术都是从HelloWorld开始的,我们先搞个HelloWorld看看React-native. 一,环境配置(1)需要一台Mac(OSX),这个是前提,建议还是入手一本啦.(2)在Mac上安装Xcode,建议X…

React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React Native只是提供了动态更新的基础,对将应用部署到哪里,如何进行动态更新并没有支持的那么完善.好在微软开发了CodePush,填补React Native 应用在动态更新方面的空白.CodePush 是微软提供的一套用于热更新 React Native 和 Cordova 应用的服务.下面将向大…

项目地址:http://liu12fei08fei.github.io/blog/41react-native.html 说明 • 项目总结代码地址 • 从项目开始启动(2018-07-02)到项目进入测试(2018-08-20) • 从我基本没用过react,到直接上手react-native • 其实从内心我是又爱又怕,爱是我确实很早就像下手除Vue以外的框架,多接触和学习一些不一样的思想:怕是前端就我一个,一切坑都由自己来抗:可想而知,内外压力一定会很大 • 过程就是日复一日的研究在研究,…

创建项目 react-native init AwesomeProject //AwesomeProject是项目名 启动 Node.js web server react-native start 启动android react-native run-android 启动ios react-native run-ios 运行特定模拟器:react-native run-ios --simulator "iPhone 5"  …

React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的搭建好环境本站推出搭建教程. 安装学习遇到任何问题可以加入 ReactNative高级交流群 127482131 或访问  http://blog.1ygowu.com ReactNative技术专题 第一步安装JAVA JDK 下载对应你电脑系统版本的 1.8 3…

可以先浏览一下中文翻译的开发文档具体了解一下关于React Native,想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html. 在官方文档中,只给出在Window上安装React Native的教程,没有给Mac下的教程,我在网上找了半天,找了部分内容,又根据自己的理解整理了一下 1.安装Java 这里需要注意对环境变量的设置,可以根据java -version来检测一下 2.安装SDK 这里需要…

RN页面中定位或滚动操作时,需要获取元素的大小和位置信息,有几种常用的方法 获取设备屏幕的宽高 import {Dimensions} from 'react-native'; var {height, width} = Dimensions.get('window'); 获取元素的大小和位置信息1. onLayout事件属性 <View onLayout={this._onLayout}><View> _onLayout = (e) => { let {x,y,width,…

CodePush热更新组件详细接入教程 什么是CodePush CodePush是一个微软开发的云服务器.通过它,开发者可以直接在用户的设备上部署手机应用更新.CodePush相当于一个中心仓库,开发者可以推送当前的更新(包括JS/HTML/CSS/IMAGE等)到CoduPush,然后应用将会查询是否有更新. 接入流程 安装 CodePush CLI 注册 CodePush账号 在CodePush服务器注册App RN代码中集成CodePush 原生应用中配置CodePush 发布更新的版本…

一.安装codepush服务 npm install code-push-cli -gcode-push -v 二.创建codepush账号 code-push registercode-push logincode-push logout 三.添加应用 Usage: code-push app add <appName> <os> <platform> 选项: -v, --version 显示版本号 [布尔] 示例: app add MyApp ios react-n…

目录 ios android 1.在android/app/src/main/java/com/<projectname>文件夹下创建opensettings文件夹 2.在opensettings文件夹下创建模块文件OpenSettingsModule.java(模块功能) 3.在opensettings文件夹下创建包文件OpenSettingsPackage.java(注册模块OpenSettingsModule) 4.把包提供到MainApplication.java文件的getPacka…

http://reactnative.cn/docs/integration-with-existing-apps/ 1.安装好ReactNative开发环境 2.安装好CocoaPods 3.创建项目根文件夹:A 4.创建文件夹A/ios 5.创建新项目到A/ios目录下(最上层目录移除,否则下面的路径需要修改,例如原来为ProjectDir/ProjectDir,但是根目录ProjectDir下只有一个文件夹,那么最上层移除,只要下一层包含项目数据文件的ProjectDir拷贝到A/ios文…

方法一: 创建不同的文件扩展名:*.android.js*.io.js 方法二: import { Platform } from 'react-native'; if (Platform.OS === 'android') { // Do something specific for Android } else if (Platform.OS === 'ios') { // Handle iOS } marginTop: Platform.OS === 'ios' 10 : 0, paddi…

reactnative可以编辑iOS程序也可以编辑Android程序, 而且80%的代码都可以重用. 及有些文件是两个系统通用的, 相信大家也都清楚了. 但是也许大家会遇到一些屏幕布局的问题, 最常遇到的就是Android的状态栏我们是无法涉及的而iOS的就可以. 所以当一个component设置了marginTop时, 两个系统需要设置的数值是不一样的. 我们没必要为了一个style而创建两个文件(***.ios.js和***.android.js)当然这肯定能解决问题, 但是每次都这样做的花…

react-native看到了给现有工程添加react-native环境的时候碰到一个问题: 如何往工程中添加 package.json文件,以及node_modules是怎么来的? 我开始的时候以为是自己创建的文件夹,package.json文件也是通过vim来写的. 但是就在写package.json时 写了一下我就感觉特别不方便.于是我想到了npm:node package manager. 尝试了一下,果然通过npm可以帮助我们完成这项任务. 具体操作: 1.进入你工程的根目录 2.np…

react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties           hideIndicators={false} // Set to true to hide the indicators indicatorColor="#FFFFFF" // Active indicator color indicatorSize={20} //…

React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事件与数据调用 七.自定义组件 八.动手写实例 九.发布与真机调试   写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和And…

React-Native 入门指导系列教程目录 一.准备工作 (已完成) 二.项目介绍与调试 三.CSS样式与Flex布局 四.常用UI控件的使用 五.JSX在React-Native中的应用 六.事件与数据调用 七.自定义组件 八.动手写实例 九.发布与真机调试   写在前面 1. 什么是React-Native? React-Native是:Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目.支持用开源的JavaScript库React.js来开发iOS和And…

React-Native 开发的项目,Android 方面没有任何问题,IOS 就是无法跑起来,报错信息如下: mac 10.14.4 xcode 10.2.1 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug build logs further, consider building your app with Xcode.…

首先推荐几个链接: React-Native 官网地址:https://facebook.github.io/react-native/docs/getting-started React-Native实现了跨平台的移动应用开发,可以说是大大的降低了人工成本,提高了代码复用效率. React-Native(以下简称RN)的ios开发环境搭建,从官网的例子中可以分为两个部分:1.纯js版本 2.需要用到Native原生 1.纯js版本 官网提供了一个Expo工具链,地址在:https://expo…

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(/cs…

开发react-native时大都有过这个操作,当版本迭代时候要修改app版本号时,一般都这样做 Android: 的要修改build.gradle文件的versionName ios: 打开xcode修改Info.plist的Bundle versions string, short 这过程特别繁琐...无法忍受 接下来,稍微改一下,让每次编译的时候自动从配置文件读取并写入相应的地方 首先,先在package.json配置版本 { "name": "you app name…

今天看下iOS原生->RN: 这里有个问题: * 我这里只能通过rn->ios->rn来是实现* 如果想直接ios-rn 那个iOS中的CalendarManager的self.bridge是nil,只有先通过rn-ios之后该值才有值.* 这里没搞明白 如果你研究通了,希望留言告诉我 直接撸代码: RN: /** * Sample React Native App * https://github.com/facebook/react-native * @flow * iOS调用RN:…

今天,记录一下iOS原生和React-Native之间的交互.如果第一次接触最好先移步至 http://www.cnblogs.com/shaoting/p/6388502.html 先看一下怎么在iOS原生中集成react-native模块. iOS原生和React-Native之间的交互主要通过NativeModules实现. 先看RN->iOS原生 开发环境版本: 准备: 终端新建一个react-native项目或者使用上一篇文章建立的demo. a.先使用Xcode打开,新建一个Cale…

安装 $ npm install jpush-react-native --save # jpush-react-native 版本以后需要同时安装 jcore-react-native $ npm install jcore-react-native --save # 针对性的link,避免之前手动配置的其它插件重复配置造成报错 $ react-native link jpush-react-native $ react-native link jcore-react-native 在link…

自己测试了下,https://www.jianshu.com/p/eceb7e66fa5e?appinstall=0 记录下自己遇到的问题,以及解决方法, 首先新建一个react native项目,然后 安装 react-native-baidu-map 模块, 安装 npm install react-native-baidu-map --save 或者 yarn add react-native-baidu-map 使用上面2个都是可以的 项目以及 地图组建安装好了,接下来就是配置了: 先打…

推送已经是是手机应用的基本功能,如果自己实现一套推送系统费时费力,所有一般我们会使用第三方的推送服务,这里我使用「极光推送」作为集成推送的例子,因为有现成的 react native 插件 jpush-react-native 可以使用. 前置准备工作 安装软件 react native (0.41.2) npm (V3.10.3) xcode (V8.2.1) 创建工程 在 Apple developer 上创建应用 并且给应用配置推送功能,创建推送证书 到 极光官网 上创建自己的应用,并上传…

目录 1. github上相关资料 2.需要满足defultValue和value属性 react-native 0.55.4版本,发现TextInput 在iOS平台上无法输入中文的问题. 1. github上相关资料 import React, {Component} from 'react'; import {Platform, TextInput} from 'react-native'; class MyTextInput extends Component { shouldCompo…

前序 纵观每个优质项目,无论web端还是native原生应用开发,弹窗都是不可忽视的一环,能很大程度上直接决定用户体验.如:微信.支付宝.ios都有很成熟的一套弹窗UI展示场景. 最近一直沉迷在react-native开发研究中,学习起来发现没有想象的难,不过也采坑了不少.鉴于之前有基于h5和小程序技术开发过自定义弹窗的经验,就想着用react-native技术实现msg信息框|alert提示框|confirm确认框|toast弱提示/loading|仿ios.android弹窗,就有了这个rn…