2017年09月_虚年

原创 React Native Navigator

Navigator 是react native @0.43之前自带的导航组件1. Navigator 是什么？一个导航组件进入下一个界面，返回上一个界面传递数据给下一个界面，返回数据给上一个界面2. 使用导入Navigator （自带组件）render返回Navigator调用Navigator的相应方法3. 示例：两个组件间的跳转和传递数据入口文件// index.iso.js

2017-09-28 17:00:52 357

原创 React Native TabNavigator导航

APP中底部中常用的nav导航，可以使用react-native-tab-navigator安装：yarn add react-native-tab-navigator引入：import TabNavigator from 'react-native-tab-navigator';配置说明：selectedTab记录选中状态selectedTitleStyle选中文字的样式renderSele

2017-09-28 16:58:36 319

原创 React Native Image使用网络图片

中文网的示例引用图片有两种形式。使用网络图片时，图片无法显示，占据了位置，显示的是空白。

2017-09-28 16:53:37 5939

原创 localStorage存储数据，若是IE11以下使用cookie存储

IE11以下不支持localStorage，若浏览器不支持，使用cookie存储var util = { // 获取 localStorage getItem: function (item) { var value; if (this.hasLocalSotrage()) { try { value = localStorage.getItem(

2017-09-12 15:31:34 2832

原创 React react-responsive媒体查询

媒体查询使用不同的组件 npm install react-responsive --savevar MediaQuery = require('react-responsive');...render() { return ( <div> <MediaQuery query='(min-device-width: 1224px)'> <PCIndex

2017-09-06 10:19:41 2802

原创 React Route打开新窗口出现Not Found

React Router 是建立在 history 之上的。有三种记录路由历史记录的方式：hashHistory、browserHistory和createMemoryHistory。hashHistory 使用 URL 中的 hash（#）部分去创建形如 example.com/#/some/path 的路由。browserHistory 它使用浏览器中的 History API 用于处理 U

2017-09-06 10:16:08 3152

原创 React 样式: CSS模块化

CSS模块化，通过require引入样式这种方式，优点是：解决了命名冲突和全局污染的问题如何使用：1. 安装css-loader依赖npm install style-loader css-loader -D2. 配置webpack的css-loader{ test: /\.css$/, loader: 'style-loader!css-loader?modules&importLoade

2017-09-03 22:30:57 6969

原创 React 样式：内联样式表达式

1. 定义stateminiHeader: false2. 定义事件switchHeader() { this.setState({ miniHeader: !this.state.miniHeader })}3. 触发事件onClick={this.switchHeader.bind(this)}4. 样式切换 const styleComponentHeader = { hea

2017-09-03 13:52:25 10199

原创 React 样式

在render 中定义，是以内联的方式加入到DOM元素中。书写时要-要写成驼峰的写法。这种方式加入css缺点是动画、伪类等不能使用const styleComponentHeader = { header: { backgroundColor: '#aaa', paddingTop: '15px', paddingBottom: '15px' }}return

2017-09-03 13:50:17 416

装载组件触发componentWillMount只会在装载之前调用一次，在 render 之前调用，你可以在这个方法里面调用 setState 改变状态，并且不会导致额外调用一次 rendercomponentDidMount只会在装载完成之后调用一次，在 render 之后调用，从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。更新组件触发这些方

2017-09-03 13:49:18 178

原创 React 组件化

return函数中只能有一个节点引入方式有两种：< ComponentFooter />变量，便于有判断条件下，加载不同的组件// header.jsimport React from 'react'export default class ComponentHeader extends React.Component{ render () { return ( <

2017-09-03 13:38:21 335

原创 React 组件传址的类型检查与默认值

React v15.5.之后的版本需要单独安装prop-types才能使用类型检查1. 引入import PropTypes from 'prop-types'2. 定义规则ComponentFooter.propTypes = { userid: PropTypes.number.isRequired}number为类型，isRequired为此参数必须传入3. 设置默认值Component

2017-09-03 13:33:01 1086

原创 React Popos属性和组件传参

React Popos属性1. props 对模块来说是外来属性2. 传递参数：<ComponentFooter userid='123' />3.模块中接受参数：<p>{this.props.userid}</p>React 子组件通过父页面传递过来的事件Props进行组件间的参数传递// 子组件<p>子页面输入：<input type='text' onChange={this.props.C

2017-09-03 13:29:55 2082

原创 React State属性

import React from 'react'export default class ComponentHeader extends React.Component { constructor () { super() // 调用基类的所有初始化方法 this.state = {username: 'Mo'} } render() { setTimeout

2017-09-03 13:22:12 592

原创 JSX 内置表达式

1. 注释{/*注释*/}2.三元表达式{userName == '' ? '用户还没有登录' : '用户名： ' + userName}3. 属性为变量<input type='button' value='按钮' disabled={showInput} />示例代码import React from 'react'export default class ComponentBody exte

2017-09-03 13:20:42 443

原创 React 操作DOM元素的两种方式

1. 使用选择器var Btn = document.getElementById('btn')2.使用ref

2017-09-03 13:17:37 16505

m0_37068028的博客