有时候，我们需要将组件定义为全局组件，即组件在 HTML 根上，在任何地方都可以调用，比如 Alert 组件。 react 版 import React from "react"; import ReactDOM from "react-dom"; import Alert from "./Alert"; const AlertWrapper = props => { ...

注：react-native + react-redux 的配置说明请看我另一篇文章。 和 web 版略有不同。 一个简单的例子 import React from "react"; import ReactDOM from "react-dom"; import { createStore, combineReducers } from "redux"; im ...

npm install -g create-react-app 创建项目 create-react-app demo 开启自主配置 执行 yarn eject 转换到可自主配置的模式 proxy 配置 package.json: "proxy": { "/api/v1": { "t ...

React-Native 的新版本取消了 navigator，使用了新的 React-Navigation 组件。这个组件非常强大。 但是有的时候我们需要自定义 Header，又不想在每个 View 上附带 Header，而是想要实现原生的效果（即 Header 是一个独立的层，和视图无关）。 参考官方文档： 普通用法：在每个StackNavigator管理的视图class中加入 ...

创建项目：react-native init demo 如果 init 太慢，可以使用淘宝的镜像 // 查看下载源 yarn config get registry // 更换为淘宝源 yarn config set registry https://registry.npm.taobao.org 启动服务器：react-native start ...

实现前进和后退的不同动画。 .left-enter { position: absolute; top: 0; bottom: 0; width: 100%; z-index: 10000; opacity: 1; transform: translate3d(100%, 0, 0); } .left-enter.left-enter-active { ...

自定义 react 组件，Img，图片获取失败时能显示指定的默认图片。 import React from "react"; import ReactDOM from "react-dom"; /** 图片加载失败就显示默认图片 */ class Img extends React.Component { constructor(props) { super(p ...

下拉刷新在手机上的体验差一直是webapp的痛点，最终我发现了这款组件。 安装 npm install react-pull-to-refresh 使用 handleRefresh(resolve, reject) { // do some async code here if (success) { reso ...