React论坛 今日: 0|主題: 520|排名: 78 

  一、前言：   　　react-navigation  3.x 版本中， 使用createDrawerNavigator 替换 原先的DrawerNavigator 方法； 　　那么，当前createBottomTabNavigator、createStackNAvigator、createDrawerNavigator、createSwitchNavigator四兄弟齐全； 　　无论使用哪一个，或者使用一个包含另一个，他们都 ...

前言 我们都知道在实际的开发阶段，后端接口开发是和前端开发同步进行，甚至迟于前端的进度，这就直就导致前端需要等待后端接口的时间。 这种情况就严重导致前端开发缓慢,那这时候前端的开发人员只能写静态模拟数据。 使用静态的json来模拟数据 这种情况是按照既定的数据格式（接口文档等），自己提供静态的JSON数据， ...

随着项目功能的扩充、版本迭代，我们与Webpack捆绑起来的的项目越来越大，大到开始影响加载速度了。这时我们就该考虑如何对代码进行拆分了。 这次我们一起学习一下如何对React项目中的代码进行Code-Splitting（代码分割、代码拆分等各种叫法.....）。 Code-Splitting的思路有很多，很多人选择的拆分方案是根据不同的路由进 ...

一、前言 距离React Hook发布已经有一段时间了，笔者在之前也一直在等待机会来尝试一下Hook，并且是尝试用Hook的方式构建整个项目，正好公司的新的存储项目启动了，需要一个新的B端的web管理平台，机会就来了。笔者公司之前的前端项目都基于笔者之前在React Class组件以生命周期的方式下搭建的工程化框架和业务最佳实践的架 ...

react里子组件不能直接操作父组件的数据。 所以要从父组件传递一个方法给子组件， 子组件获取到该方法后，把子数据传入该方法， 父组件才能获取到子数据 例子： 子组件 Child.js import React, { Component } from 'react' class Child extends Component{ constructor(props){ super(props) this.sta ...

一、项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开发的手机端仿微信界面聊天室——reactChatRoom，实现了聊天记录下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。 二、技术栈 MVVM框架：react / react-dom 状态管理：redux / re ...

import React, {Component} from 'react'; import { Menu, Icon } from 'antd'; import {Link} from 'react-router-dom'; const menuList = [ { title: '首页', // 菜单标题名称 key: '/home', // 对应的 path icon: 'home', // 图标名称 }, { title: '商品', key: '/ ...

一、react-hooks概念 　　React中一切皆为组件，React中组件分为类组件和函数组件，在React中如果需要记录一个组件的状态的时候，那么这个组件必须是类组件。那么能否让函数组件拥有类组件的功能？这个时候我们就需要使用hooks。　　Hooks让我们的函数组件拥有了类似类组件的特性，Hook是React16.8中新增的功能，它们 ...

 React Native 获取验证码 按钮   效果如图：     实现方法： 一、获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import React from 'react'; import PropTypes from 'prop-types'; import { View, Text, TouchableOpacity, ViewPropTypes, StyleSheet } from 'reac ...

更新日志： v1.2.0 ...未完待续 v1.1.0 添加editorconfig 配置ESLint 集成prettier 集成 lint-staged 实现细节： 添加editorconfig editorconfig 帮助我们约束多个开发者在同一个项目中代码风格，更重要的是它是跨编辑器，IDE 的。 # http://editorconfig.org # 这是根文件，不用继续往上查找 root = true # 匹配全部 ...

官方文档 https://reacttraining.com/react-router/web/guides/quick-start 中文文档 https://react-router.docschina.org/web/example/basic git地址 https://github.com/ReactTraining/react-router#readme react-router是与react配合使用的路由库，react-router提供多个包可以单独使用。 　　react-rout ...

一、在使用支付宝支付、微信支付之前导入桥接好的头文件 　　github地址：https://github.com/xujianfu/react-native-pay 二、集成支付宝支付流程 　　RN支付宝需要分别对iOS（Xcode）和安卓（AS）配置，与原生app相比只是将支付操作放在了RN当中。 　　流程大同小异，一般都是从后台获取支付字符串，然后传递支付字符串调 ...

当当当又get到了一个新技能，使用react-markdown来直接解析markdown文件（咳咳，小菜鸟的自娱自乐） 项目中遇到了一个API的那种展示方式，类似于入门手册啥的那种，如果是一个个调用接口，改样式很复杂，所以用了直接解析后台给的markdown文件 首先我们需要安装一个react的网页语法高亮插件，（我最初并没有安装这个，结果 ...

/* https://reactjs.org/docs/react-component.html React生命周期函数： 组件加载之前，组件加载完成，以及组件更新数据，组件销毁。 触发的一系列的方法 ，这就是组件的生命周期函数 组件加载的时候触发的函数： constructor 、componentWillMount、 render 、componentDidMount 组件数据更新的时 ...

React-Native之打包发布(Android) 一,介绍与需求  移动端打包发布到应用市场 二,发布配置 注意：以下所有操作都在win10下进行,React Native版本0.59.5,android-studio 版本 3.2 1,生成签名 1 keytool -genkey -v -keystore app.keystore -alias yingqi -keyalg RSA -keysize 2048 -validity 10000 附加说明： ...

    参考npm文档：https://www.npmjs.com/package/echarts-for-react 由于npm上已经有针对react项目出的echarts插件,所以在这里直接安装 第一步：npm安装echarts-for-react npm install --save echarts-for-react npm install echarts --save //如果有报错找不到echarts模块，需要在安装一下exharts' 第二 ...

react的弹出层不同于以往的DOM编程，我们知道，在DOM中，弹出层事件绑定在对应的节点上即可，但是在react中，往往只能实现父子之间的传递控制，显然，弹出层的层级不符合此关系。 在这里我们需要使用React官方的portals portals可以帮助我们将子节点插入到父节点层级之外的地方 注：官方文档使用的是class，我在这里使用的 ...

原文：Fullstack React's Guide to using Refs in React Components作者：Yomi Eluwande译者：博轩 译文：https://segmentfault.com/a/1190000019277029 使用 React 时，我们的默认思维方式应该是 不会强制修改 DOM ，而是通过传入 props 重新渲染组件。但是，有些情况却无法避免修改 ...

在使用路由的时候，有的时候我们的界面只能够在登录之后才可以看的到，这个时候就需要使用路由权限控制了 找了资料发现一个就是我使用的方法，一个是高阶组件。 原谅菜鸟看不太懂不会使用高阶组件………… 首先在路由中做一个私有权限的限制，限制里面的path就是你的私有界面  router.js <Switch> <Route path ...

16.3.0之前的设置方法为 var HelloMessage = React.createClass({ childMethod: function(){ alert("组件之间通信成功"); }, render: function() { return <div> <h1>Hello {this.props.name}</h1> <button onClick={this.childMethod}>子组件</button></div> } }); // 父组件 var ImD ...