学习ReactNative笔记整理一___JavaScript基础 ★★★笔记时间- 2017-1-9 ★★★ 前言: 现在跨平台是一个趋势,这样可以减少开发和维护的成本.第一次看是看的ReactNative的网络请求,使用的是fetch来使用的,然后深深的被吸引了.这是第一个整理的学习笔记,后续还有会更新. 学习链接地址: https://pan.baidu.com/s/1dFMJtAD 密码: hs3e 学习课程目标 <JavaScript基础>1小时27分 <ECMAScript…

Android studio 模拟器(Nexus_5_API_28.avd)无法联网可进入settings/Network&internet/Private DNS把默认的automatic改成Off即可. react-native run-android: Android studio RN 模拟器卸载App后出现此错误 ActivityManager: Error: Activity class {..} does not exist. 可以使用adb uninstall com.aweso…

1.<FlatList/> _renderItem = ({item})=>{ return <View style={[styles.part4Row]}> <Text style={this.props.titleFont}>{item.name}</Text> <Text style={this.props.valueFont}>{item.value}</Text> </View> } <FlatLis…

参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup.html#content 1.安装Jdk(最好默认安装路径尽量别改) http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html http://www.jb51.net/article/36811.htm(三个环境变量都配置)  Ja…

填坑笔记 开始入坑RN,从最开始的学起难免有不少乱七八糟的问题,记录在这里. 1. 8081端口占用问题 按照官网教程搭建开发环境并按照下面代码运行时候有报错,显示8081端口的问题 react-native init AwesomeProject cd AwesomeProject react-native run-ios 应该就是端口占用的问题,首先找到占用程序,用下面代码,加上sudo,如果什么都没有发生.可以看到PID. lsof -i :8081 然后用下面命令杀掉,也加上sudo.…

本文直接引用大神文档: [WINDOWS环境 React Native初识]com.android.ddmlib.InstallException: Failed to establish session白屏问题解析 详情: 今天,可算改完了自己名下的bug.没辙,谁让自己太菜,妹子不爱,所以闲来无事,挥锄头动动ReactNative. ReactNative理论就不说了,反正网上多的是.我要是能说,我也不在这里废话了,直接进入实战. 首先,你得安装JAVA JDK,安装android环境,配置…

原文地址:http://reactnative.cn/docs/0.31/props.html#content 1. property: 如下代码所示 import React, { Component } from 'react'; import { AppRegistry, Image } from 'react-native'; class Bananas extends Component { render() { let pic = { uri: 'https://upload.wik…

看了东方耀老师的视频,跟着记下了以下笔记,其实和东方耀老师的课堂笔记差不多,增加了一点细节 1. 生成一个签名密钥: 在项目目录下运行 keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 注:my-release-key是文件名,my-key-alias是别名. 最后会生成一个my-release-key.keystor…

运行react-native run-android时出现错误 EPERM:operation not permitted,lstat .............. 解决办法:用Android Studio打开项目后Clean Project再运行react-native run-android就可以了 (估摸着是因为原来编译后生成的文件缺失,NodeJs 要移动文件时找不到 clean后再调用run-android,让react-native帮你的项目编译就不会出现缺失问题了)…

今天来写一个组件,相信很多人都会用到的——ViewStack. ViewStack组件无疑是UI中很重要的一个组件,可惜react-native并没有内嵌进去,需要开发者自己去实现. 实现原理很简单,就是根据索引来显示一个子视图,用一个render即可完成: render(){ return( <View> {this.props.children[this.props.index]} </View> ); } 这样,一个最简单的ViewStack就完成了,那怎么使用呢: <…

毫无疑问,我是个不善于写博文的人. 毫无疑问,react是个出的框架. 毫无疑问,react-native更是个牛逼的引擎. 我个人对react-native的理解就是js被js引擎编译,去调用本地语言提供的接口,然后达到原生语言能达到的视觉效果和运行效果,就是这么简单. 然而,在实际接触中,哪有那么简单. 首先吐槽的就是react-native init方法居然要FQ,还好公司的是海外带宽,创建之后可以带回家继续开发. 还有就是我这个中国人能看得懂的中文文档太少了,国内基本没几篇原创的文章,大…

本文均为RN开发过程中遇到的问题.坑点的分析及解决方案,各问题点之间无关联,希望能帮助读者少走弯路,持续更新中... (2019年3月29日更新) 原文链接:http://www.kovli.com/2018/06/25/rn-anything/ 作者:Kovli - 如何在原生端(iOS和android两个平台)使用ReactNative里的本地图片(路径类似require('./xxximage.png')). 在ReactNative开发过程中,有时需要在原生端显示RN里的图片,这样的好处…

开发环境的搭建,按照 https://reactnative.cn/docs/getting-started/ 里面的步骤一步一步来,这里记录下需要注意的几点:1.初始化react-native项目的时候最好加上版本号 react-native init MyApp --version 0.44.3 不然可能导致运行不成功 2.运行react-native run-ios前,记得yarn install(npm install)安装依赖包…

1. react-native引入第三方库时报Command `run-android` unrecognized: 在使用第三方库tab-navigator时调用: npm install react-native-tab-navigator --save 再次运行时直接报Command run-Android unrecognized. Make sure that you have run npm install and that you are inside a React-native…

前言 Navigator主要用于ReactNative中的跳转,中文文档: http://reactnative.cn/docs/0.39/using-navigators.html 懒得打字介绍更多了,将上面的官网文档看一遍之后应该有个大概了解了. initialRoute 配置初始路由参数: configureScene 用于配置场景动画: renderScene 指示具体如何渲染一个场景: 一个可选的导航栏组件,个人感觉这个不太好用,一般不用它: {...route.passProps}用…

概述 视频播放可以自己写原生代码实现,然后注入JS.如果对视频播放没有特殊要求的话,可以直接使用现成插件. 到官方推荐的插件网站搜索找到下载量第一的插件:react-native-video. 安装 安装很简单: npm install -g react-native-video 配置 配置过程官网已经介绍的很详细了,这里再复述一遍. 首先运行react-native link来链接react-native-videolibrary(说实话这一步具体作用是干啥我还没弄明白). 然后修改andro…

概括 关于RN的热更新,网上有很多现成方案,但是一般都依赖第三方服务,我所希望的是能够自己管控所有一切,所以只能自己折腾. 热更新的思路 热更新一般都是更新JS和图片,也就是在不重新安装apk的情况下更新JS和图片,这个需求是很普遍的.通过前面的了解我们知道RN的JS都被打包成了一个bundle文件,默认是在assets文件夹下面,但是这个文件夹是只读不可写的,那怎么办呢?好在RN有一个getJSBundleFile方法可以自定义bundle文件的路径,把它自定义到一个我们有写入权限的地方然后下…

各种命令 个人习惯在项目根目录下把一些常见命令写成bat文件,以后每次要执行什么只需要双击即可: 编译.生成.运行并启动packager(debug模式): react-native run-android 所谓packager其实就是一个文件同步服务,默认监听8081端口,启动它之后,运行debug模式的ReactNative应用可以随时reload我们的JS.有时候使用上面的命令之后packager服务没有自动启动,此时需要我们手动启动. 我们还可以直接在AndroidStudio中运行项目…

一个最简单的HelloWorld页面 先不多解释,直接上代码: import React, { Component } from 'react'; import {AppRegistry, StyleSheet, Text, View} from 'react-native'; export default class helloworldComponent extends Component { render() { return ( <View style={styles.container…

前言 本文开发环境为Windows,目标平台为Android,react-native版本为0.35.0. 环境搭建 注意,本文不是按照官网的教程来的,官网说必须安装什么Chocolatey,我懒得鸟它. 安装前请准备以下环境: jdk(必须1.8或更高版本) node.js & npm python2(注意不支持python3,我的是2.7) android sdk(并且已经配置好相关环境变量) 首先安装react-native-cli: npm install -g react-native…

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; export default class AlignItemsBasics extends Component { render() { return ( // 尝试把`alignItems`改为`flex-start`看看 // 尝试把`justifyContent`改为`flex-end`看看 // 尝试把`f…

1.css单位转换px2dp 在做页面开发的时候习惯了用rem去做css单位,处理各种尺寸数据,到了React-Native里面做app开发时,rem就不好用了,这个时候就需要转换成另外一个单位,基本原理和rem转换差不多,如下 'use strict'; import { Dimensions } from 'react-native'; const deviceH = Dimensions.get('window').height; const deviceW = Dimensions.ge…

一.安装nodejs 查看是否安装:npm -v 二.安装react-native命令工具 npm install -g react-native-cli 三.查看 react-native --help 四.安装安卓开发工具 https://developer.android.google.cn/index.html 开发-Android Studio-下载 五. react-native init <名字> 六. cnpm install emulator -avd 5 -gpu off…

详细步骤请查看官网对应文档,BUT,有些注意事项请注意! 1,优先安装Node.js,因为后面可以使用npm安装软件, 2,注意不要使用CNPM!!!!!!!!! 3,Android Studio 请安装最新版本!注意配置设置和系统环境变量配置. 4.推荐安装 Genymotion 注意:此模拟器依赖于VirtualBox请到官网下载单独的最新版本. 好了,基本就是这样.…

已经发现的bug或者问题 Android不支持shadow属性: Animated.Image的borderRadius不生效: setNativeProps无法修改图片的source: 没有直接设置组件显示与隐藏的属性,只能变相实现: require加载图片不能是变量或者拼接的字符串: require加载json也是一样,也不支持动态加载: 图片拉伸时默认效果是cover,而不像html中的stretch: 开启远程调试时动画非常卡,甚至可以说卡到看不到动画效果: debug模式和releas…

一.比例属性flex和布局方向属性flexDirection 例如三个视图的flex属性值分别为2.4.8,则它们的高度比例为2:4:8.,宽度不指定,默认为全屏的宽度. class ZLFReactNativeDemo extends Component { render() { return ( <View style={styles.container}> <View style={styles.style1}></View> <View style={st…

1.fatal error: 'React/RCTBridgeDelegate.h' file not found 这个问题是应为没有安装cocoaPods 所以无法安装ios需要的第三方库.安装cocoaPods请自行百度.安装完以后查看一下步骤 在项目的iOS目录下 运行 pod install --verbose --no-repo-update   然后重新运行就可以了.…

上周学习了flux,这周研究了一下redux,其实很早之前都已经在研究他们了,只是之前一直没搞懂,最近这两周可能打通了任督二脉,都算入门了. 写博客的目的主要是做一下笔记,总结一下思路,以及和大家交流交流 在介绍redux之前,先回顾一下上周学习的flux: flux的流程是: view触发action中的方法: action发送dispatch: store接收新的数据进行合并,触发View中绑定在store上的方法: 数据的改变都是来自于store 通过修改局部state,改变局部view.…

ReactNativeDemo 学习ReactNative开发,搭建ReactNative第一个项目 React Native 开发笔记 1.安装Homebrew $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 2.安装wget.git.curl工具 //每次执行brew命令时,最好先执行brew update 或者 brew upg…

所有ppt下载地址:http://pan.baidu.com/s/1mg9o4TM 下面是移动开发实践部分的阅读笔记. 移动开发网络性能优化实践 - 陈浩然 (携程) 携程是非常标准的移动App架构,基础是各种Infrastructure Frameworks, 基于上面是UI的控件库,运行时的库(猜测用于动态配置).最上层是业务层面,各个App层可以相对独立形成业务模块化.同时也是Hybrid的架构,有Web Container来实现WebApp的模块. 网络服务 Native TCP连接 +…