import React, { Component } from 'react';
import PropTypes from "prop-types";
class MouseChangeStyleWrap extends Component {
  static propTypes = {
    children: PropTypes.any,
    mouseOverStyle: PropTypes.object,
    mouseOutStyle: PropTypes.object,
    mouseOverClass: PropTypes.string,
    mouseOutClass: PropTypes.string,
  }
  constructor(props) {
    super(props);
    this.state = {
      mouseOver: false
    };
  }
  handleMouseOver = () => {
    this.setState({
      mouseOver: true
    });
  }
  handleMouseOut = () => {
    this.setState({
      mouseOver: false
    });
  }
  render() {
    const { mouseOutStyle, mouseOverStyle, mouseOverClass, mouseOutClass } = this.props;
    const { mouseOver } = this.state;
    return (
      <span onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} style={mouseOver ? mouseOverStyle :  mouseOutStyle} className={mouseOver ? mouseOverClass : mouseOutClass }>
        {this.props.children}
      </span>
    );
  }
}
export default MouseChangeStyleWrap;

class ...YourListAbstraction {
  _scrollY = 0;
  _lastTimeScrolled = 0;
  scrollHackToWorkaroundWhiteBug (amount) { // call at appropriated time, with -1 or 1. if possible alternate so you don't change the actual scroll over calls xD
    const { list } = this.refs;
    if (!list) return;
    if (Date.now() - this._lastTimeScrolled < 500) return; // don't mess with user scroll
    list.getScrollResponder().scrollTo({
      y: this._scrollY + amount,
    });
  }
  onScroll = ({ nativeEvent }) => { // give onScroll={this.onScroll} to ListView
    this._scrollY = nativeEvent.contentOffset.y;
    this._lastTimeScrolled = Date.now();
  };
}

import { Modal, Button } from 'antd';
class App extends React.Component {
  state = { visible: false }
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleOk = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  handleCancel = (e) => {
    console.log(e);
    this.setState({
      visible: false,
    });
  }
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.showModal}>Open</Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <p>Some contents...</p>
          <p>Some contents...</p>
          <p>Some contents...</p>
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

if(this.state.visible) {
  <Modal
    title="Basic Modal"
    visible
    onOk={this.handleOk}
    onCancel={this.handleCancel}
  >
    <Form record={this.state.reocrd}> {/*这里放一下自己写的子组件， 不限于Form*/}
  </Modal>
}

import React, { Component } from 'react';
import { List } from "antd-mobile"; //用来antd mobile
import _ from "lodash";
import {
  CameraRoll,
} from 'react-native';
const Item = List.Item;
const Brief = Item.Brief;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      categorys: [],
      currCategory: null,
    };
  }
  componentDidMount() {
    this.getPhotoTypes();
  }
  getPhotoTypes = async() => {
    const data = await CameraRoll.getPhotos({ first: 10000}); //得到10000条相片
    const uniqTypesPics = _.groupBy(data.edges, (val) => {
      return val.node.group_name;
    }); // 根据他的group_name进行分组
    let categorys =_.keys(uniqTypesPics).map((key)=> {
      return {
        name: key,
        demoImage: uniqTypesPics[key][0].node.image,//拿到分组的第一张图片作为样例
        count: uniqTypesPics[key].length,//拿到分组的图片数量
      };
    })
    this.setState({
      categorys: categorys
    }); //对筛选的分组进行存储 因为是异步操作所以是不能直接得到值的。要先存到state里面
  }
  renderGroups = () => {
    return this.state.categorys.map((category)=> {
      return (
        <Item
          key={category.name}
          arrow="horizontal"
          multipleLine
          thumb={category.demoImage.uri}
          onClick={() => {
            this.setState({
              currCategory: category.name
            });
          }}
          platform="android"
          extra={category.count}
        >
            <Brief>{ category.name} </Brief>
        </Item>
      )
    });
  }
  handleModalBack = () => {
    this.setState({
      currCategory: null
    });
  }
  render() {
    return (
      <List className="my-list">
        {this.renderGroups()}
      </List>
    );
  }
}
export default App;