React和ReactNative
文章平均质量分 91
逐步深入实战React或者是ReactNative,也会收集日常的实战例子等技术技巧,学习和提高技术水平
KENYCHEN奉孝
这个作者很懒,什么都没留下…
展开
-
ReactNative环境搭配及软件安装
ReactNative环境搭配及软件安装环境安装准备(以下安装的软件可选择到其他盘,不一定非得C盘,建议各软件安装的路径都不要出现中文):安装包:Node.js下载地址:https://nodejs.org/en/,点击DOWNLOADS,点击图中所示下载后直接安装,注意:安装路径可自选,但千万不要出现中文字符Python2.7下载地址:https://www.python.org/downloads/release/python-2715/,在下面找到图中所圈中的...转载 2021-01-07 14:25:54 · 675 阅读 · 0 评论 -
1024祝青春少年!!!
2020.10.24程序员节日,祝青春少年!!!KenyBook-Pro:~ apple$ ls /usr/local/bin/node/usr/local/bin/nodeKenyBook-Pro:~ apple$ ls /usr/local/bin/npm/usr/local/bin/npm安装react-native-clinpm install -g react-native-cli...原创 2020-10-24 10:46:28 · 279 阅读 · 0 评论 -
npm调试
1.npm installhttps://nodejs.org/en/download/ please select lastest version2.npm updatenpm -v :show versonnpm install npm -g : npm updatenpm install npm -gC:\Users\dev\AppData\Roaming\npm\npm -> C:\Users\dev\AppData\Roaming\npm\node_modules\n原创 2020-10-22 15:16:40 · 738 阅读 · 0 评论 -
node for docker cendos 7
1.curl -sL https://rpm.nodesource.com/setup_14.x | bash -2.yum install yarn3.yum install python384.yum install -y nodejs gcc-c++ make5.yum install -y nodejsFailed to set locale, defaulting to C.UTF-8Node.js Packages for Enterprise Lin...原创 2020-09-21 14:36:20 · 234 阅读 · 1 评论 -
重新安装react后调试代码使用
React 是什么?React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。React 中拥有多种不同类型的组件,我们先从React.Component的子类开始介绍,定义一个开发者会什么语言;如下:class DevelopList exten...原创 2020-04-10 10:23:38 · 1198 阅读 · 0 评论 -
重新安装和配置reactnative环境
检查机器记录npm -version6.13.7将国外站点变为淘宝网下载npm install -g cnpm --registry=https://registry.npm.taobao.org⸨ ░░░░░░░░░░░░░░░░⸩ ⠧ fetchMetadata: sill resolveWithNewModule esprima@3.1.3 checking insta...原创 2020-04-10 08:35:54 · 574 阅读 · 0 评论 -
机器换了另一个,react-native 一直不好
机器换了另一个,react-native 一直不好react-native doctorCommon✓ Node.js✓ npm✖ Watchman - Used for watching changes in the filesystem when in development mode - Version found: N/A - Version support...原创 2020-04-09 21:42:52 · 1582 阅读 · 0 评论 -
Android statio cpu heap
Android statio RN1.新建个项目npm installnpm WARN @typescript-eslint/eslint-plugin@1.13.0 requires a peer of eslint@^5.0.0 but none is installed. You must install peer dependencies yourself.npm WARN ...原创 2020-01-30 12:44:43 · 444 阅读 · 0 评论 -
环境异常处理
FAILURE: Build failed with an exception.info Launching emulator...error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.warn Please launch an emulator m...原创 2020-03-02 18:42:12 · 2822 阅读 · 0 评论 -
Hangman 猜语言单词
Hangman 猜语言单词原创 2020-01-17 16:05:50 · 411 阅读 · 0 评论 -
React社区学习笔记1
1.学习社区的示例目的是通过React社区熟悉和精通每个示例项目,记录学习笔记的目的是为自己提高做记录,同时和相关同学一起探讨技术问题;简单的电子商务购物车应用程序从浮动购物车中添加和删除产品 按最高到最低和最低到最高价格对产品进行分类 按可用尺寸过滤产品 页面重新加载后,产品仍保留在浮动购物车中 单元测试、集成测试和e2e测试 响应式设计例子Zeldog...原创 2020-01-17 12:55:01 · 257 阅读 · 0 评论 -
Express 4.X 初体验
1.什么是Express?Express是基于Node.js平台,快速、开放、极简的 Web 开发框架,最新版本为Express4.17.1。2.Express的安装npm install express --save当然是在你安装好npm和node的前提后,运行上面安装命令+ express@4.17.1added 50 packages from 37 contri...原创 2020-01-10 10:47:29 · 510 阅读 · 0 评论 -
react native 学习笔记19
1.服务端接口的设计 RESTfulHttp的协议常用方法:GETPOSTPUT: 请求服务器存储一个资源Delete:请求服务器删除指定资源HEAD: 请求指定资源的响应头OPTIONS:返回服务器支持的HTTP请求方法设计和定义商品的APIhttp://host:port/products 获取所有商品信息 get 请求http://host:port/...原创 2020-01-03 15:18:59 · 101 阅读 · 0 评论 -
react native 学习笔记18
学习页面跳转功能Navigator组件的功能,老鸟先飞App.js 修改为下面的。/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React , { Component } from 'react';import...原创 2020-01-02 21:31:02 · 122 阅读 · 0 评论 -
react native 学习笔记17
1.学习拖拽刷新列表修改App.js的,定义一个isRefreshing:false伪造一下新的商品数据;刷新数据:_onRefresh =() =>{ this.setState({isRefreshing:true}); setTimeout(()=>{ const products=Array.from(ne...原创 2020-01-02 19:06:08 · 110 阅读 · 0 评论 -
react native 学习笔记16
1.图片下面增加指示图片2.需要重新定义商品列表商品列表的商品名称和描述再一次了,还需要优化一下text描述需要再上一个View的地方效果为:列表加上横线...原创 2020-01-02 18:24:30 · 116 阅读 · 0 评论 -
react native 学习笔记15
重构代码,需要简单的代码2.还是代码冗余还需要修改<ScrollView ref="scrollView" horizontal={true} showsHorizontalScrollIndicator={false} pagingEnabled={true} > <TouchableHighlight onPress...原创 2020-01-02 16:35:42 · 106 阅读 · 0 评论 -
react native 学习笔记14
1.增加按钮响应Button 增加onPress响应<Button style={styles.button} title='搜索' onPress={()=>Alert.alert('你单击了按钮"搜索按钮"',null,null)}></Button>2.增加广告的响应输入的input的圆角...原创 2020-01-02 14:09:06 · 120 阅读 · 0 评论 -
npm错误处理ERR! Maximum call stack size exceeded
解决方式是重新安装npmnpm install npm -gnpm WARN checkPermissions Missing write access to /usr/local/lib/node_modules/npmnpm WARN checkPermissions Missing write access to /usr/local/lib/node_modulesnpm ER...原创 2020-01-02 13:40:33 · 3357 阅读 · 0 评论 -
react native 学习笔记13
1.今天学习定义页面,效果如下:定义的页面最上面一个没有顶上去,还需要修改页面修改searchbar:marginTop:Platfrom.OS==='ios'?20:0 说明:Ios上边为20,而android=0;2.建搜索框3.学习滚动页面上面的广告3个页面,小而且,不好看,一般用户就看一个大的广告,所以还需要修改界面需要让广告动起来...原创 2020-01-02 12:59:30 · 176 阅读 · 1 评论 -
react native 学习笔记12 ios失败片
1.今天用工具pycharm的工具新建一个react native 项目,等待很久很久建立的项目2.项目具体详细清单/usr/local/bin/node /usr/local/lib/node_modules/react-native-cli/index.js init RNThis will walk you through creating a new React Native p...原创 2020-01-01 22:18:01 · 1497 阅读 · 2 评论 -
react native 学习笔记11
1.android 一直提示这个,重新安装apk不可以,还是这种,2.BatchedBridge是什么错误呢?需要更加了解原理原创 2019-12-31 14:52:53 · 111 阅读 · 0 评论 -
react native 学习笔记10
学习增加一个网页嵌入进来没有什么改动,出现这个。奇怪了了Metro我重新来过还是一样;还是有错误!原创 2019-12-31 12:21:20 · 104 阅读 · 0 评论 -
react native 学习笔记9-1
学习android 选择器组件import React ,{Component} from 'react';import {Picker} from 'react-native';export default class PickerDemo extends Component{ constructor(props){ super(props); ...原创 2019-12-31 11:53:45 · 137 阅读 · 0 评论 -
react native 学习笔记9
增加一个ButtonApp.js不动 到时候添加添加 import DuttonDemo from ’./ButtonDemo'新建立一个ButtonDemo.jsimport React, { Component } from 'react';import { Button, View } from 'react-native';export default class...原创 2019-12-31 11:18:43 · 134 阅读 · 0 评论 -
React组件的生命周期
什么是React?它的生命周期是什么?1.React是UI组件库;2.React的生命周期为:挂载----》更新---》卸载3.事件的分类挂载:仅一次调用更新:多次调用卸载:仅一次调用3.1 生命周期事件生命周期事件 挂载 constructor() componentWillMount() render() c...原创 2019-12-17 10:32:46 · 112 阅读 · 0 评论 -
创建react失败经验
创建的项目失败Installing packages. This might take a couple of minutes.Installing react, react-dom, and react-scripts with cra-template...yarn add v1.13.0info No lockfile found.[1/4] ???? Resolving pack...原创 2019-12-19 16:15:08 · 3924 阅读 · 0 评论 -
react 学习笔记1
1.react 安装完毕2.React 开始使用1,创建Rect.createElement()let linkReact =React.createElement('a',{helf:'http://www.baidu.com'},'百度地址‘)实际就是<a></a>的超地址链接2.通过div来创建2个<h1>let h1=React...原创 2019-12-20 16:16:01 · 169 阅读 · 0 评论 -
react native 学习笔记2
安装node.js react native npm install -g react-native-cli nuclide watchman 如果提示权限错误无法安装,加上sudosudo npm install -g react-native-cli提示安装成功/usr/local/bin/react-native -> /usr/local/lib/node...原创 2019-12-27 11:10:20 · 1272 阅读 · 0 评论 -
react native 学习笔记8
jest mock的mock服务jest mock定义jest.fn()cat __tests__/functions.test.jstest('测试jest.funtion()调用', () => { let mockFn = jest.fn(); let result = mockFn(1, 2, 3, 4); // 断言mockFn的执行后返回unde...原创 2019-12-30 19:58:28 · 196 阅读 · 0 评论 -
react native 学习笔记7
配置package.json"test:report": "jest --reporters='jest-html-reporter'"安装jest-html-reporter运行npm run test:report跟目录下建测试报告:jest --reporters='jest-html-reporter'Determining test suites to ru...原创 2019-12-30 19:25:54 · 211 阅读 · 0 评论 -
react native 学习笔记6
jest里面覆盖率定义:package.json{ "name": "jestTest", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "jest-cli": "^22.0.4" }, "scripts": { "test": "jest ...原创 2019-12-30 19:18:33 · 117 阅读 · 0 评论 -
react native 学习笔记5
1.安装Jest单元测试工具npm install jest-cli -save-dev> fsevents@1.2.11 install /Users/keny88888/RNLearn/Shop-React-Native/node_modules/fsevents> node-gyp rebuild SOLINK_MODULE(target) Release/...原创 2019-12-30 16:50:18 · 1151 阅读 · 0 评论 -
react native 学习笔记4
1.安装代码检查工具npm install --save-dev flow-bin安装后,会出现一个这个文件.flowconfig 隐藏文件。内容大概如下:cat .flowconfig[ignore]# We fork some components by platform..*/*.android.js# Ignore templates with `@flow` ...原创 2019-12-30 15:32:25 · 145 阅读 · 0 评论 -
react native 弱爆例子2
1.继续修改例子1的的App.js,想在下面插入一个图片2.修改App.js增加一个Image的,在View里面增加一个<Image source={pic} style={{width: 193, height: 110}} />import React, { Component } from 'react';import {Image , Text , View...原创 2019-12-30 09:22:29 · 178 阅读 · 0 评论 -
react native 弱爆例子
1 react-native init myProject2.修改App.jsimport React, { Component } from 'react';import { Text, View } from 'react-native';export default class HelloWorldApp extends Component { render() {...原创 2019-12-30 09:09:19 · 187 阅读 · 0 评论 -
react native 学习笔记3
1.机器重新重启。2.android 重新安装配置3.bash_profile 重新配置android 启动成功,出现Hello88888!4.学习例子SampleAppMovies网站无法访问原创 2019-12-28 22:34:03 · 112 阅读 · 0 评论 -
react 学习笔记5-1
XXXXdeMacBook-Pro-3:TShop XXXXX$ react-native run-android 'enulator-5554'Scanning folders for symlinks in /Users/XXXXX/RNLearn/TShop/node_modules (28ms)JS server already running.Building and instal...原创 2019-12-27 17:10:13 · 546 阅读 · 1 评论 -
react 学习笔记4
用react-native的安装初始化AwesomeProject1.react-native init AwesomeProject cd AwesomeProjectnpm install2 adb devices确定android虚拟机adb devicesList of devices attachedemulator-5554 device3...原创 2019-12-27 16:38:13 · 590 阅读 · 0 评论 -
react native 学习笔记1
React和React Native的关系React是基础,React Native是专门开发移动应用,需要掌握JavaScript的语法,以及操作运算符,条件语句,循环语句,switch语句,函数,对象。开发环境搭建for macnpm 安装比较慢,可以切换到淘宝镜像上,安装。npm install -g cnpm --registry=https://registry.npm....原创 2019-12-23 10:53:00 · 1263 阅读 · 0 评论