React Native
清雨未尽时
清雨入清晨,午时未阳依。
百望夕阳暮,如梦未尽时。
展开
-
React Native 学习 之JSX
JSX是什么 字面上来看JSX即 JavaScript XML取首字母结合,所以JSX并不是一门新语言,仅仅是个语法糖。 React发明了JSX,利用HTML语法来创建虚拟DOM。当遇到 我们在浏览器运行的时候,JSX语法会通过Babel转换成浏览器认识的JS。 Babel:我们装RN的时候你会再目录看到很多Babel文件夹,JSX语法依赖原创 2017-09-22 17:50:50 · 970 阅读 · 0 评论 -
ReactNative开发——自定义组件
一、页面文件index.jsimport {sum} from './TestComponent'import { AppRegistry } from 'react-native';import {StackNavigator} from 'react-navigation'import RegisterScene from './RN/com.kangxg.custom/Registe...原创 2018-03-23 15:55:00 · 246 阅读 · 0 评论 -
React Native 常见设备的屏幕缩放比例
import { Dimensions, PixelRatio} from 'react-native';export default { 'ScreenWidth':Dimensions.get('window').width,// 屏幕宽度 'ScreenHeight':Dimensions.get('window').height, // 屏幕高度...原创 2018-03-30 10:25:05 · 1409 阅读 · 0 评论 -
React Native 调试项目
一、打开调试1.iOS 平台摇动设备 或者使用组合快捷键 control + command+z2.Android 平台中摇动设备或者使用组合快捷键 command+m3.打开 Chrome浏览器 输入 http://localhost:8081/debugger-ui在Chrome浏览器中打开开发者工具或者使用快捷键 command+option+i...原创 2018-03-21 17:26:42 · 228 阅读 · 0 评论 -
WebStorm 创建 React Native
一、打开 WebStorm点击create这时候 会自动下载依赖的包下载完成后二、运行 项目三、运行后 1.iOS 项目用 Xcode打卡2.安卓项目用Android Studio 打开运行即可原创 2018-03-21 18:07:49 · 317 阅读 · 0 评论 -
React-Native Flow 安装及使用
一、进入RN项目目录下执行命令 npm install --save-dev flow-bin二、创建配置文件touch .flowconfig三、在package.json文件配置"scripts": { "flow": "flow; test $? -eq 0 -o $? -eq 2", "start": "node node_modules/react-native/lo...原创 2018-03-22 10:44:24 · 790 阅读 · 0 评论 -
Wrong version of Flow. The config specifies version ^0.65.0 but this is version 0.54.1
在 React Native 项目中 用Flow 检查错误,执行命令 npm run flow出现 错提示这是因为当前flowconfig的版本为^0.65.0 但是现在本地的版本是0.54.1解决办法:1.运行 brew upgrade flow 命令 进行更新2.cd 到当前工程下,运行open .flowconfig 拉到最下面,改成当前版本就可以了重新执行 npm run flow...原创 2018-03-22 10:51:20 · 1505 阅读 · 0 评论 -
React Native mobx 安装
1.进入项目目录下,并安装需要的依赖:mobx 和mobx-react。yarn add i mobx mobx-react 我们也要安装一些 babel 插件,以支持 ES7 的 decorator 特性: yarn add babel-plugin-transform-decorators-legacy babel-preset-react-native-stage-0 现在,在.babel...原创 2018-04-03 11:45:13 · 693 阅读 · 0 评论 -
Npm install cannot find module 'semver'
进入终端执行以下四个步骤:sudo rm -rf /usr/local/lib/node_modulessudo rm -rf ~/.npmbrew uninstall --force nodebrew install node如果还出现错误,进入项目目录执行: npm install -g react-native-clihttps://stackoverflow.com/questions/...原创 2018-04-03 11:47:35 · 2141 阅读 · 0 评论 -
React Native集成SQLite
项目开发中设计到数据存储,考虑用到 SQLite ,react-native-sqlite-storage 是在查阅文档中推荐使用最高的一个第三方库,故做如下配置。一、配置 iOS1.进入RN项目目录 执行 yarn add react-native-sqlite-storage2.然后进行linkrnpm linkrnpm 即 React Native Package Manager,是r...原创 2018-03-28 15:32:14 · 1678 阅读 · 0 评论 -
React Native 之 TextInput组件去掉下划线
在使用RN开发中,TextInput 组件使用,iOS 没有下划线 而安卓有下划线 ,特此需要设置<View style ={ETTLogStyles.log_input_top}> <TextInput style ={this.inputStyle()} placeholder={this.placeholder() }> </TextInput...原创 2018-04-17 11:56:00 · 1645 阅读 · 0 评论 -
React -Native 状态栏文件居中
代码:var StackHomeOptions =({navigation})=>{ let {state} = navigation; console.log('Home navigation:'+navigation+state.params); const headerStyle = ETTHeaderStyles.headerStyle; const...原创 2018-04-04 18:39:50 · 410 阅读 · 0 评论 -
React-Native 状态栏设置
import React, { Component } from 'react';import { Platform, StyleSheet, View, StatusBar} from 'react-native';import ETTHeaderStyles from '../res/styles/ETTHeaderStyles';export class ETTL...原创 2018-04-04 18:43:11 · 3187 阅读 · 0 评论 -
React-Native 中组件、变量、方法的导入和导出
React-Native 中组件、变量、方法的导入和导出一、组件导出组件export default class ConfirmDialog extends Component{ render() { return( <View style={ConfirmDialogStyles.confirmCont}> ...原创 2018-03-23 15:39:27 · 1296 阅读 · 0 评论 -
React Native 调用iOS原生功能—直播
项目 中 采用React Native 开发 ,观看直播调用iOS 原生接口 RN代码import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, TouchableHighlight, NativeModules, Native原创 2017-11-14 16:38:36 · 1209 阅读 · 0 评论 -
React Native 学习一 搭建开发环境
参考文章https://reactnative.cn/http://www.jianshu.com/p/3dc9d70a790fhttp://www.jianshu.com/p/b88944250b25http://www.jianshu.com/p/9211f42d5c25http://www.cocoachina.com/ios/20170511/19250.htmlh原创 2017-09-14 18:18:40 · 328 阅读 · 0 评论 -
React Native学习二
一 React Native 组件的生命周期 在React Native项目中,所有展示的界面都可以看做是一个组件(Component), 例如在BugShop 项目中的 app.js中 import React, { Component } from 'react'; import { AppRegistry, Sty原创 2017-09-17 16:51:20 · 286 阅读 · 0 评论 -
函数响应式编程(FRP)与 ReactiveCocoa
前言 应用通常会消费、制造和更新数据。响应式编程是一种编程范式,能够表示数据流,而无需担心副作用或对其他并发执行的任务造成影响。 响应式编程背后的核心思想是随时间流逝体现数据的值。使用动态值的数据流会导致这些值随着时间而变化。 函数响应式编程(functional reactive programming,FRP)允许响应式编程使用内建的块方法进行函数式编程,如map、redu原创 2017-10-10 11:50:30 · 641 阅读 · 0 评论 -
React Native 混合编程 之与原生平台通信原理
API:(Application Programming Interface) 是指应用程序的接口,在React Native 平台上,API是一些预先定义并实现好的函数,基于React Native 平台的API,应用开发者通过调用这些接口就可以达到预期的目的,而无需了解React Native 内部工作的细节。组件:(Componet)是对数据和方法等简单封装,可以理解为一个组件就是一个对象,它可以有自己的属性和方法。React Native 应用中,所以展示等界面都可以看做是一个组件,它们只是功能原创 2017-10-19 22:41:16 · 1632 阅读 · 0 评论 -
React Native 混合编程 之移植项目
React Native 学习五 混合编程 之访问iOS设备原创 2017-10-19 22:42:51 · 365 阅读 · 0 评论 -
React Native 混合编程 之访问原生API
React Native 混合编程 之访问原生API原创 2017-10-19 22:43:17 · 1595 阅读 · 0 评论 -
React Native 混合编程 之访问iOS设备
React Native 学习五 混合编程 之访问iOS设备原创 2017-10-21 00:34:32 · 219 阅读 · 0 评论 -
React Native 混合编程 之常用API
React Native 提供以下的常用APIAlert:跨平台的提示框AppRegisty:注册React Native 应用的入口AsyncStorage:React Native 提供的键-值存储系统。Dimensions:用于获取设备的屏幕宽高Platform:用于获取设备当前运行的平台名称StyleSheet:提供了一种类似CSS样式表的抽象。定时器:setI原创 2017-10-21 10:49:52 · 1038 阅读 · 0 评论 -
React Native 原生平台调用React Native组件
React Native 应用根组件的注册和调用 ,原理如下图:AppRegistry.registerComponent 接口将React Native 平台的根组件 RNTransplant 注册到了原生平台上。当React Native启动时,原生平台会调用该组件,iOS工程中调用 React Native 组件的AppDelegate.m 代码为:原创 2017-10-21 23:20:20 · 539 阅读 · 0 评论 -
React Native App的热部署
iOS应用发布到App Store 是需要审核的,而且审核通过时间不确定,有可能因为某一改变而受苹果规则限制而拒绝,有可能因为某一节日到来前App Store 需要审核的比较多而影响审核进度。但是移动应用产品更新的速度却非常的快,通常 1~2周或者几天时间就可以完成一次版本的迭代。热部署 就是为了解决这一问题而产生的,不用提交新的审核,通过服务器动态更新React Native的 JavaScript 代码来实现应用的更新。原创 2017-10-22 01:11:48 · 924 阅读 · 0 评论 -
React Native 向iOS项目中添加React Native支持
向iOS项目中添加React Native支持iOS 中添加RN原创 2017-10-21 23:38:42 · 618 阅读 · 0 评论 -
React Native for Android Nnable to load script from assets 'index.android bundle'
在android手机上运行react-native项目时报错:unable to load script from assets 'index.android bundle' ,make sure your bundle is packaged correctly or youu're runing a packager server解决方案:第一步:在 android/app原创 2017-11-17 13:34:09 · 500 阅读 · 0 评论 -
RN iOS 真机器调试
1.产看mac 电脑的IP地址 (测试机网络要一致)2.更改 RCTInspectorDevServerHelper.mm if (!host) { //host = @"localhost"; host = @"192.168.8.169"; }3.采用Xcode 运行 cli ...原创 2018-06-14 15:09:38 · 2865 阅读 · 0 评论