- 博客(52)
- 收藏
- 关注
RSS订阅原创 RAC原理及应用
ReactiveCocoa简介 ReactiveCocoa（简称为RAC）,是由Github开源的一个应用于iOS和OS开发的新框架。在iOS开发过程中，经常会响应某些事件来处理某些业务逻辑，例如按钮的点击，上下拉刷新，网络请求，属性的变化（通过KVO）或者用户位置的变化（通过CoreLocation）。但是这些事件都用不同的方式来处理，比如action、delegate、KVO、callba...
2019-11-05 11:00:35
1433
原创 Flutter学习
一、Flutter 图片组件 图片组件是显示图像的组件，Image 组件有很多构造函数，这里我们只给大家讲两个 Image.asset， 本地图片 Image.network 远程图片 源代码: ...
2019-10-23 17:21:36
232
原创 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
312
原创 Dart学习
1、 Dart介绍 环境搭建-文档 Dart介绍： Dart是由谷歌开发的计算机编程语言,它可以被用于web、服务器、移动应用 和物联网等领域的开发。 Dart诞生于2011年，号称要取代JavaScript。但是过去的几年中一直不温不火。直到Flutter的出现现在被人们重新重视。 要学Flutter的话我们必须首先得会Dart。 官网：https://dart.dev/ Dart环境搭...
2019-10-15 18:46:27
298
原创 人脸识别
1.创建face.py文件 import requests def detect_face(image_url, api_key="wn11_Rb4RJS9r_ntUcJlHM4M0Hg385Iu", api_secret="K9Uhh9H_YxgujHgZJel0A-c_X8V1yjkK", ret...
2019-09-26 10:24:48
202
原创 ReactNative 快速开始
ReactNative 快速开始 学习使用 ReactNative 最令人头疼的就是环境问题，因为大多数 Web 开发者，并不熟悉 Android 与 IOS 的开发环境，配置起来比较繁琐。当然 Android 程序员也不熟悉 IOS 环境，反之亦然，这导致很多人因为繁杂的开发环境而放弃学习或者暂时搁浅。 为了改善这个问题，一个快速的开发环境解决方案应运而生。这个方案需要两个工具：1. creat...
2019-08-21 11:51:58
1079
原创 react-native环境安装
环境安装说明 凡是安装开发环境，都需要注意以下几点，防止意外错误的发生： 安装的软件目录中不要出现中文与特殊字符，尤其是空格 计算机名称(控制面板\所有控制面板项\系统中设置)不要中文，改成英文，也不要特殊字符 Node环境 如果已经安装过Node并且是使用安装包单独安装，那么先卸载掉，然后使用nvm进行安装，好处是可以动态切换Node版本以适应不同环境的需求，目前ReactNative需要...
2019-08-21 11:39:45
224
原创 移动APP介绍
移动指的是移动设备平台, app 是应用 (application) 的缩写, 移动App就是移动设备上运行的应用程序 种类划分 WebAPP: 网页应用, 需要运行在浏览器环境中, 无需安装即可使用 使用纯web技术开发实现 由浏览器负责UI界面的渲染 NativeAPP: 原生应用, 直接运行在移动设备上, 需要安装后使用 主要采用设备原生语言开发实现, 利用一些新技术可使用其他语言...
2019-08-21 11:38:07
1602
1
原创 豆瓣电影案例
项目创建与目录结构设计 使用create-react-native-app projectName命令创建一个项目，然后在项目中创建src文件夹作为源代码目录，里面创建config目录存放常量与配置数据，创建components目录存放项目组件，组件划分为公共组件与页面组件两种。 - src - config - api.js: 项目所需接口 - component...
2019-08-20 15:54:42
1097
原创 React Native Enviroment
React Native Enviroment 前面我们使用的开发方式是进化过的方式，简述步骤就是，先安装一个Expo应用程序，然后使用扫一扫功能在Expo内运行我们的App，偏向传统的前端开发方式。 这在之前，React Native采用的开发方式是先把写好的项目打包编译成一个独立App，然后直接安装到手机上运行，偏向传统的Native开发方式。 环境预览 [参照文档] http://reac...
2019-08-20 15:49:38
382
原创 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
188
原创 ScrollView组件的基本使用
下面代码是在ES6语法，实现图片的播放，但拖到时停止（onScrollBeginDrag）和停止拖动（onScrollEndDrag）后继续播放会出现问题，做个记录，也请大神指点一下。 import React, {Fragment,Component} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, Vi...
2019-08-14 19:46:12
642
原创 React-Native 生命周期(ES6)
在React Native中使用组件来封装界面模块时，整个界面就是一个大的组件，开发过程就是不断优化和拆分界面组件、构造整个组件树的过程。 所以学习理解组件的生命周期显得尤为重要！ 一、组件的属性(props)和状态(state) 属性（props） 它是组件的不可变属性（组件自己不可以自己修改props）。 组件自身定义了一组props作为对外提供的接口，展示一个组件时只需要指定props作为...
2019-08-09 10:15:42
954
原创 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
899
原创 组件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
472
原创 var let const 三则如何区分？
想弄清楚这三者的区别，我们需要知道这三者最基本的来龙去脉。 var是ES5中的变量，let、const是ES6中的变量。 块级作用域是在ES6中引进的，那么什么是块级作用域呢？ 简单的来说，就是包含在{…}中的代码就是叫块级作用域，其中for语句、if语句也属于块级作用域。 既然是在ES6中才有的块级作用域，而且let、const也是ES6中有的，由此可见，这两者肯定跟块级作用域有瓜葛，有说不清道...
2019-08-08 09:38:35
280
原创 react-native 加载图片的几种方式
一、RN本地项目图片访问 1.1、通过source——require访问 <Image source={require(’./img/icon.png’)} style={styles.imageStyle}/> 1.1.1、 Image的缩放模式resizeMode cover: 保持图片宽高比缩放直到图片宽和高都等于或者大于容器宽高，默认属性 contain: 保持图片宽高比缩...
2019-08-07 16:16:20
5381
原创 屏幕适配之获取屏幕的分辨率
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
433
原创 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
157
原创 react学习-简书项目实战
源代码：https://github.com/fanxiao168/jianshu 项目持续更新中…
2019-07-19 17:00:49
291
原创 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
179
原创 react-redux实践
React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据 安装 在你的React app中使用React-Redux： yarn add react-redux Provider和connect React-Redux 提供组件，能够使你的整个app访问到Redux store中的数据： ...
2019-07-18 17:36:02
327
原创 Redux Saga实践
本文用以记录从调研Redux Saga，到应用到项目中的一些收获。 什么是Redux Saga 官网解释 来自：https://github.com/redux-saga/redux-saga redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and...
2019-07-17 14:44:47
277
原创 使用Redux axios完成TodoList 列表的网络请求初始化、增加、删除功能
git 源码 https://github.com/fanxiao168/React-todoList 效果图 3. 创建store store文件夹下 index.js import { createStore ,applyMiddleware ,compose} from 'redux'; import reducer from './reducer'; import ...
2019-07-17 11:39:20
316
原创 使用Antd实现TodoList页面布局
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品 安装antd $ yarn add antd 使用方法 参考官网 https://ant.design/docs/react/introduce-cn 效果图： 4. 代码 TodoList.js import React, { Component } from 'r...
2019-07-15 20:03:47
766
原创 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
1887
转载 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
291
原创 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
101
转载 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
403
转载 React中Props，State与render函数之间的关系
react是由数据驱动的框架，当数据发生变化页面就会自动的发生变化。它背后的原理，，， 数据和页面联动的机理 当组件的state或者props发生改变的时候，render函数就会重新执行，页面就会从新被渲染，因为页面是由render函数渲染出来的。同时，当父组件的render函数被运行时，它的子组件的render都将被重新运行一次 什么是虚拟DOM 加入没有react，我们自己实现这个功能，思路大...
2019-07-03 23:00:27
1009
转载 使用 PropTypes 进行类型检查
注意： 自 React v15.5 起，React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。 我们提供了一个 codemod 脚本来做自动转换。 随着你的应用程序不断增长，你可以通过类型检查捕获大量错误。对于某些应用程序来说，你可以使用 Flow 或 TypeScript 等 JavaScript 扩展来对整个应用程序做类型检查。但即使你不使用这些扩展，Rea...
2019-06-28 10:50:13
629
原创 React开发-实现TodoList新增删除功能
1. React开发环境准备 安装nodejs和npm： 下载地址https://nodejs.org/en/download 安装成功后,查看版本shangyudianzideMacBook-Pro:~ shangyudianzi$ npm -v 6.9.0 shangyudianzideMacBook-Pro:~ shangyudianzi$ node -v v10.16.0 创建项...
2019-06-26 16:33:32
628
转载 React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图： 如图，可以把组件生命周期大致分为三个阶段： 第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化； 第二阶段...
2019-06-26 14:40:45
229
原创 React绑定事件
1. React 中绑定事件的注意点 事件的名称都是React的提供的，因此名称的首字母必须大写onClick、onMouseOver 为事件提供的处理函数，必须是如下格式 onClick= { function } 用的最多的事件绑定形式为： <button onClick={ () => this.show('传参') }>按钮</button> ...
2019-06-26 11:24:08
883
原创 在项目中为scss或less文件启用模块化并同时使用bootstrap
把 自己的样式表，定义为 .scss 文件 第三方的 样式表，还是 以 .css 结尾 我们只需要为自己的 .scss 文件，启用模块化即可； 运行cnpm i sass-loader node-sass -D 安装能够解析scss文件的loader 运行cpm i [email protected] -S 添加loader规则： { test: /\.scss$/, us...
2019-06-25 19:41:00
1010
转载 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
155
原创 使用css样式表美化组件
安装loader cnpm 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
552
原创 评论列表组件
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
1691
原创 class创建的组件中的this.state
使用function 和 class 两种创建组件方式的对比 注意：使用class关键字创建的组件，有自己的私有数据和生命周期函数 注意：使用function创建的组件，只有props。没有私有数据和生命周期函数 1.用构造函数创建出来的组件：叫做"无状态组件" 2.用class关键字创建出来的组件：叫做“有状态组件” 3.什么情况下使用有状态组件，什么情况下使用无状态组件？ 有状态组件和无状态组...
2019-06-19 21:24:39
506
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人