bee-ui/src/Picker/item.js

import React, {
  Component, PropTypes,
} from 'react';

import {
  TouchableWithoutFeedback, View,
} from 'react-native';

import Checkbox from '../Checkbox';
import Text from './stringToText';

class Item extends Component {
  // 初始化外界参数
  constructor(props) {
    super(props);
    this.componentWillReceiveProps(props);
  }

  // 将变更同步到 state
  componentWillReceiveProps = (props) => {
    this.state = { ...props };
  }

  // 缩短 state 链路
  set state(state) {
    state && Object.keys(state).forEach(key => this[key] = state[key]);
  }

  picked = false

  render() {
    const { children, onChange, picked, style } = this;
    return (
      <TouchableWithoutFeedback onPress={() => onChange(!picked)}>
        {Text.isText(children) ? (
          <View style={[{ flexDirection: 'row', height: 54, alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 20, borderTopWidth: 1, borderTopColor: '#e2e2e2' }, style]}>
            <Text>{children}</Text>
            {picked && (
              <Checkbox checked={picked} />
            )}
          </View>
        ) : (
          <children.type {...children.props} picked={picked} />
        )}
      </TouchableWithoutFeedback>
    );
  }
}

Item.propTypes = {
  picked: PropTypes.bool,
  style: View.propTypes.style,
};

Item.defaultProps = {
  picked: false,
  style: null,
};

export default Item;