
ReactNative
清风乐鸣
前端开发工程师
展开
-
React-native 获取屏幕宽度/高度/像素
/** * Sample React Native App * https://github.com/facebook/react-native * @flow * 2811132560@qq.com * 说明:项目名为Demo1 */import React, { Component } from ‘react’; //注册一下,你要用什么组件 import {原创 2016-11-07 21:43:46 · 5502 阅读 · 0 评论 -
三端开发调研之京东Taro
三端开发调研之TaroTaro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信小程序、H5、App 端等)运行的代码。实现 一次编写,多端运行。和JDreact的关系Taro 是基于 Nerv.js 搞的。Nerv 是在 2017 年初就已经开发了的基于 v...原创 2019-03-07 09:37:08 · 777 阅读 · 0 评论 -
知乎项目代码阅后总结
项目源地址源码地址项目中增加Reactotron:使用方法项目中的问题[白图为源码,彩图为修改后的正确代码]:setStateaxios请求回来的数据回填到setState中,应该只调用一次setState一个页面需要调用2次接口才能渲染出时候,应该用回调改为回调axios,同时setState只设置一次个人还是比较崇拜先定义后导出的写法ex...原创 2018-12-19 10:47:05 · 401 阅读 · 0 评论 -
<Link>s rendered outside of a router context cannot navigate<React-router报错>
今天这个问题找了好久,终于找到为什么了,我们在百度上搜这个问题基本上只有一个答案点击打开链接其实不是说人家回答的不对,只是比较含糊,看截图:其实答案就是这样的,当我们在用react-router的时候,react-router的思想就是让我们写成一个单独的组件Navigation.js,然后import进来,通过this.props.children 传递给各路由原创 2018-02-01 20:17:41 · 1196 阅读 · 0 评论 -
React点击谁谁显示
实现效果如下:首先 app.js 组件代码import React, { Component } from 'react';import ReactDOM from 'react-dom';import Btn from './button'class App extends Component { constructor(props){ super(props)原创 2017-12-07 15:41:59 · 1599 阅读 · 0 评论 -
React仿豆瓣网项目
[https://github.com/QTFYING/douban](https://github.com/QTFYING/douban)原创 2017-12-06 10:30:51 · 853 阅读 · 0 评论 -
React 使用技巧总结 <二>
7. 渲染一个木偶组件import React from 'react';function NotFound(props) { return ( <div>NotFound</div> )}export default NotFound; 8.ES5 的时候,一个页面可以有多个 React.createClass,同理在 class 类中一个页面中也可以有多个 class 类原创 2017-12-01 23:48:44 · 410 阅读 · 0 评论 -
React使用技巧总结 <一>
1. 当渲染的只有一个目标元素的时候可以直接省去 returnfunction FormList({ color = 'blue', text = 'Confirm'}) { return( <button className = {`btn btn-${color}`}> <em>{text}</em> </button> )}const FormList原创 2017-12-01 23:38:10 · 1959 阅读 · 1 评论 -
开发 react 应用最好用的脚手架 create-react-app
1. 介绍在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧。大家都是用webpack + es6来结合react开发前端应用。这个时候,我们可以手动使用npm来安装各种插件,来从头到尾自己搭建环境。比如:npm install react react-dom --savenpm install babel babel-loa...原创 2017-11-29 15:15:43 · 73062 阅读 · 10 评论 -
React Native 狗狗说初步搭建
**本人个人交流群:495807302。**前几天做了一个案例—- 狗狗说(慕课网),由于原视频比较采用 react native 0.22 版本,好多东西都不匹配,查阅一下资料,把其中的坑给大家说一下:1. 首先我们来进新建项目由于国内 npm 被墙,所以我们一般都是通过淘宝镜像来进行项目的安装:$ sudo npm install -g cnpm --registry=https://regis原创 2017-03-18 20:49:34 · 1703 阅读 · 0 评论 -
React入门
React 入门推荐 1 推荐收藏 1 收藏,84 浏览React入门包含是什么为什么怎么用搭建示例应用不包含生态圈/公用组件应用框架编译/合并代码是什么react 是一个做原创 2016-11-24 22:43:16 · 812 阅读 · 0 评论 -
jsxtransformer.js 和browser.js有什么关系?
在react 0.14前,浏览器端实现对jsx的编译依赖jsxtransformer.js在react 0.14后,这个依赖的库改为browser.js页面script标签的type也由text/jsx改为text/babel但是以上只能用来测试学习react生产环境需要借助编译工具事先将jsx编译成js对应的这个工具也由react-tool更换为babel原创 2016-11-24 21:51:57 · 2186 阅读 · 0 评论 -
React Native 之布局篇
React Native 之布局篇一.Flex布局 1.什么是Flex布局?布局的传统解决方案,是基于盒子模型,依赖display属性+position属性+float属性,这种布局方式对于特殊布局非常不方便, 比如,垂直居中就不好实现.2009年,W3c提出的Flex布局,即弹性布局,用来为盒子模型提供最大的灵活性,任何一个容器都可以指定为Flex布局. 2.容器的属性(6个) Re原创 2016-11-01 15:59:38 · 842 阅读 · 0 评论 -
react-native自定义控件怎么实现屏幕宽度的80%
原来我们讲过在定义PixelRatio后可以获取屏幕的宽度,代码如下: var width = Dimensions.get(‘window’).width; 然后在类CSS样式中采用:width:width*0.8然后就可以了原创 2016-11-10 10:13:35 · 3330 阅读 · 0 评论 -
再次浅谈ReactDom.render( )
今天遇到一个问题,在用creat-react-app脚手架搭建React项目的时候,我们能不能在index.js这个页面传值或者写其他的函数呢,我一开始以为是不可以的,但是没想到试试后竟然也是OK的,就拿属性延展来举例子吧:原来页面:import React from 'react';import ReactDOM from 'react-dom';import './index.cs...原创 2019-04-02 15:59:01 · 1545 阅读 · 0 评论