- 博客(52)
- 收藏
- 关注
RSS订阅原创 RAC原理及应用
ReactiveCocoa简介ReactiveCocoa（简称为RAC）,是由Github开源的一个应用于iOS和OS开发的新框架。在iOS开发过程中，经常会响应某些事件来处理某些业务逻辑，例如按钮的点击，上下拉刷新，网络请求，属性的变化（通过KVO）或者用户位置的变化（通过CoreLocation）。但是这些事件都用不同的方式来处理，比如action、delegate、KVO、callba...
2019-11-05 11:00:35
1406
原创 Flutter学习
一、Flutter 图片组件 图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个Image.asset， 本地图片Image.network 远程图片源代码:...
2019-10-23 17:21:36
224
原创 Flutter Container 组件、Text 组件详解
一、Flutter Text 组件import 'package:flutter/material.dart';void main(){ runApp(MyApp());}class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ r...
2019-10-23 11:28:15
281
原创 Dart学习
1、 Dart介绍 环境搭建-文档Dart介绍：Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。Dart诞生于2011年，号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。要学Flutter的话我们必须首先得会Dart。官网：https://dart.dev/Dart环境搭...
2019-10-15 18:46:27
274
原创 人脸识别
1.创建face.py文件import requestsdef detect_face(image_url, api_key="wn11_Rb4RJS9r_ntUcJlHM4M0Hg385Iu", api_secret="K9Uhh9H_YxgujHgZJel0A-c_X8V1yjkK", ret...
2019-09-26 10:24:48
195
原创 ReactNative 快速开始
ReactNative 快速开始学习使用 ReactNative 最令人头疼的就是环境问题，因为大多数 Web 开发者，并不熟悉 Android 与 IOS 的开发环境，配置起来比较繁琐。当然 Android 程序员也不熟悉 IOS 环境，反之亦然，这导致很多人因为繁杂的开发环境而放弃学习或者暂时搁浅。为了改善这个问题，一个快速的开发环境解决方案应运而生。这个方案需要两个工具：1. creat...
2019-08-21 11:51:58
1068
原创 react-native环境安装
环境安装说明凡是安装开发环境，都需要注意以下几点，防止意外错误的发生：安装的软件目录中不要出现中文与特殊字符，尤其是空格计算机名称(控制面板\所有控制面板项\系统中设置)不要中文，改成英文，也不要特殊字符Node环境如果已经安装过Node并且是使用安装包单独安装，那么先卸载掉，然后使用nvm进行安装，好处是可以动态切换Node版本以适应不同环境的需求，目前ReactNative需要...
2019-08-21 11:39:45
210
原创 移动APP介绍
移动指的是移动设备平台, app 是应用 (application) 的缩写, 移动App就是移动设备上运行的应用程序种类划分WebAPP:网页应用, 需要运行在浏览器环境中, 无需安装即可使用使用纯web技术开发实现由浏览器负责UI界面的渲染NativeAPP:原生应用, 直接运行在移动设备上, 需要安装后使用主要采用设备原生语言开发实现, 利用一些新技术可使用其他语言...
2019-08-21 11:38:07
1564
1
原创 豆瓣电影案例
项目创建与目录结构设计使用create-react-native-app projectName命令创建一个项目，然后在项目中创建src文件夹作为源代码目录，里面创建config目录存放常量与配置数据，创建components目录存放项目组件，组件划分为公共组件与页面组件两种。- src - config - api.js: 项目所需接口 - component...
2019-08-20 15:54:42
1081
原创 React Native Enviroment
React Native Enviroment前面我们使用的开发方式是进化过的方式，简述步骤就是，先安装一个Expo应用程序，然后使用扫一扫功能在Expo内运行我们的App，偏向传统的前端开发方式。这在之前，React Native采用的开发方式是先把写好的项目打包编译成一个独立App，然后直接安装到手机上运行，偏向传统的Native开发方式。环境预览[参照文档] http://reac...
2019-08-20 15:49:38
367
原创 FlatList实践
下面这个问题暂时还没有解决import React, {Fragment,Component} from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, Text, Image, FlatList, TouchableOpacity, Alert} from 'react-nat...
2019-08-19 16:07:49
176
原创 ScrollView组件的基本使用
下面代码是在ES6语法，实现图片的播放，但拖到时停止（onScrollBeginDrag）和停止拖动（onScrollEndDrag）后继续播放会出现问题，做个记录，也请大神指点一下。import React, {Fragment,Component} from 'react';import { SafeAreaView, StyleSheet, ScrollView, Vi...
2019-08-14 19:46:12
614
原创 React-Native 生命周期(ES6)
在React Native中使用组件来封装界面模块时，整个界面就是一个大的组件，开发过程就是不断优化和拆分界面组件、构造整个组件树的过程。所以学习理解组件的生命周期显得尤为重要！一、组件的属性(props)和状态(state)属性（props）它是组件的不可变属性（组件自己不可以自己修改props）。组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为...
2019-08-09 10:15:42
930
原创 QQ登录界面案例布局
import React, {Component} from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, Text, Image, TextInput, TouchableOpacity, Alert} from 'react-native';...
2019-08-08 20:05:23
885
原创 组件Image和九宫格效果
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Fragment , Component} from 'react';import { SafeAreaView, StyleSheet, Scro...
2019-08-08 11:24:10
449
原创 var let const 三则如何区分？
想弄清楚这三者的区别，我们需要知道这三者最基本的来龙去脉。var是ES5中的变量，let、const是ES6中的变量。块级作用域是在ES6中引进的，那么什么是块级作用域呢？简单的来说，就是包含在{…}中的代码就是叫块级作用域，其中for语句、if语句也属于块级作用域。既然是在ES6中才有的块级作用域，而且let、const也是ES6中有的，由此可见，这两者肯定跟块级作用域有瓜葛，有说不清道...
2019-08-08 09:38:35
269
原创 react-native 加载图片的几种方式
一、RN本地项目图片访问1.1、通过source——require访问<Image source={require(’./img/icon.png’)} style={styles.imageStyle}/>1.1.1、 Image的缩放模式resizeModecover: 保持图片宽高比缩放直到图片宽和高都等于或者大于容器宽高，默认属性contain: 保持图片宽高比缩...
2019-08-07 16:16:20
5346
原创 屏幕适配之获取屏幕的分辨率
import React, {Fragment} from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar,} from 'react-native';import { Header, LearnMoreLinks, Colors, Debug...
2019-08-07 11:30:40
412
原创 FlexBox布局
import React, {Fragment} from 'react';import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar,} from 'react-native';import { Header, LearnMoreLinks, Colors, Debug...
2019-08-07 10:32:50
145
原创 styled-components解决全局样式'injectGlobal' 废除的问题
在以前的styled-components中设置全局样式只需要 引入injectGlobal 即可，然而今天我用injectGlobal 的时候，总是提示不存在，找了半天找到原因。The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4. 用官方的话来讲，就是这个API 从...
2019-07-19 16:55:09
173
原创 react-redux实践
React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据安装在你的React app中使用React-Redux：yarn add react-reduxProvider和connectReact-Redux 提供组件，能够使你的整个app访问到Redux store中的数据：...
2019-07-18 17:36:02
311
原创 Redux Saga实践
本文用以记录从调研Redux Saga，到应用到项目中的一些收获。什么是Redux Saga官网解释 来自：https://github.com/redux-saga/redux-sagaredux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and...
2019-07-17 14:44:47
262
原创 使用Redux axios完成TodoList 列表的网络请求初始化、增加、删除功能
git 源码 https://github.com/fanxiao168/React-todoList效果图3. 创建store store文件夹下 index.jsimport { createStore ,applyMiddleware ,compose} from 'redux';import reducer from './reducer';import ...
2019-07-17 11:39:20
307
原创 使用Antd实现TodoList页面布局
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品安装antd $ yarn add antd使用方法 参考官网https://ant.design/docs/react/introduce-cn效果图：4. 代码TodoList.jsimport React, { Component } from 'r...
2019-07-15 20:03:47
744
原创 React中实现CSS过渡动画及使用动画效果
style.css.show { /*opacity: 1; transition: all 0.1s ease-in;*/ animation: show-item 2s ease-in forwards;}.hide { /*opacity: 0; transition: all 0.1s ease-in;*/ animation: hide-item 2s ease-...
2019-07-09 20:12:02
1874
转载 React高级内容
知识点8、React的生命周期函数9、React生命周期函数的使用场景10、使用Charles实现本地数据11、React中实现CSS过渡动画12、React中使用CSS动画效果13、使用react-transition-group实现动画14、react-transition-group的使用8、React的生命周期函数定义：生命周期函数指在某一个时刻组件会自动调用执行的函数。...
2019-07-09 16:42:30
276
原创 React生命周期函数
import React, { Component, Fragment } from 'react';import TodoItem from './TodoItem'import './style.css'class TodoList extends Component {// constructor()：构造函数// 执行：组件加载钱最先调用一次，仅调用一次。// 作用：定...
2019-07-09 10:11:45
94
转载 React中ref的使用
React中Ref是什么？ref是React提供的用来操纵React组件实例或者DOM元素的接口。ref的作用对象ref可以作用于：React组件的实例class AutoFocusTextInput extends React.Component { constructor(props) { super(props); this.textInput = React....
2019-07-08 18:01:32
391
转载 React中Props，State与render函数之间的关系
react是由数据驱动的框架，当数据发生变化页面就会自动的发生变化。它背后的原理，，， 数据和页面联动的机理当组件的state或者props发生改变的时候，render函数就会重新执行，页面就会从新被渲染，因为页面是由render函数渲染出来的。同时，当父组件的render函数被运行时，它的子组件的render都将被重新运行一次什么是虚拟DOM加入没有react，我们自己实现这个功能，思路大...
2019-07-03 23:00:27
992
转载 使用 PropTypes 进行类型检查
注意：自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。我们提供了一个 codemod 脚本来做自动转换。随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，Rea...
2019-06-28 10:50:13
618
原创 React开发-实现TodoList新增删除功能
1. React开发环境准备安装nodejs和npm：下载地址https://nodejs.org/en/download安装成功后,查看版本shangyudianzideMacBook-Pro:~ shangyudianzi$ npm -v6.9.0shangyudianzideMacBook-Pro:~ shangyudianzi$ node -vv10.16.0创建项...
2019-06-26 16:33:32
617
转载 React Native 中组件的生命周期
概述就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：如图，可以把组件生命周期大致分为三个阶段：第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；第二阶段...
2019-06-26 14:40:45
218
原创 React绑定事件
1. React 中绑定事件的注意点事件的名称都是React的提供的，因此名称的首字母必须大写onClick、onMouseOver为事件提供的处理函数，必须是如下格式onClick= { function }用的最多的事件绑定形式为：<button onClick={ () => this.show('传参') }>按钮</button>...
2019-06-26 11:24:08
859
原创 在项目中为scss或less文件启用模块化并同时使用bootstrap
把 自己的样式表，定义为 .scss 文件第三方的 样式表，还是 以 .css 结尾我们只需要为自己的 .scss 文件，启用模块化即可；运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader运行cpm i bootstrap@3.3.7 -S添加loader规则：{ test: /\.scss$/, us...
2019-06-25 19:41:00
997
转载 React.js - 第2天
React.js - 第2天0. 安装 React Developer Tools 调试工具React Developer Tools - Chrome 扩展下载安装地址主要内容学习 创建组件的第二种方式美化React组件的样式小Demo穿起来之前学习的知识点React中绑定事件React组件的生命周期1. React中创建组件第1种 - 创建组件的方式使用构造函数来创...
2019-06-25 16:11:07
141
原创 使用css样式表美化组件
安装loadercnpm i style-loader css-loader -D创建css文件css->cmtitem.css.title{ font-size: 14px; } .content{ font-size: 12px; } .cmtbox{ border: 1px dashed #ccc; margin:...
2019-06-25 15:47:27
537
原创 评论列表组件
index.js// 1. 导入包import React from 'react'import ReactDOM from 'react-dom'//导入评论组件import CmtList from '@/components/CmtList'// 3. 调用 render 函数渲染ReactDOM.render(<div> <CmtList>&...
2019-06-20 12:05:39
1676
原创 class创建的组件中的this.state
使用function 和 class 两种创建组件方式的对比注意：使用class关键字创建的组件，有自己的私有数据和生命周期函数注意：使用function创建的组件，只有props。没有私有数据和生命周期函数1.用构造函数创建出来的组件：叫做"无状态组件"2.用class关键字创建出来的组件：叫做“有状态组件”3.什么情况下使用有状态组件，什么情况下使用无状态组件？有状态组件和无状态组...
2019-06-19 21:24:39
495
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人