JDPicker (支持lite版)

选择组件

属性

selectedValue: PropTypes.any

当前选中的value

onValueChange: function

当value改变时的回调

style: View.propTypes.style

组件样式

show: boolean

是否显示

onClose: function

关闭pick时的回调

示例

const React = require('react');
const {
  View,
  StyleSheet
} = require('react-native');
const {
  JDThemeText,
  JDDevice,
  JDButton,
  JDPicker
} = require('@jdreact/jdreact-core-lib');
const PageContainer = require('../../components/PageContainer');

const PICKER_CONFIGS = [
  {
    label: 'Java',
    value: 'Java',
  },
  {
    label: 'JavaScript',
    value: 'JavaScript',
  },
  {
    label: 'Python',
    value: 'Python',
  },
  {
    label: 'PHP',
    value: 'PHP',
  },
  {
    label: 'GoLang',
    value: 'GoLang',
  },
  {
    label: 'C++',
    value: 'C++',
  },
  {
    label: 'CSS',
    value: 'CSS',
  },
  {
    label: 'HTML5',
    value: 'HTML5',
  },
  {
    label: 'TypeScript',
    value: 'TypeScript',
  },
  {
    label: 'Angular',
    value: 'Angular',
  },
  {
    label: 'NativeScript',
    value: 'NativeScript',
  },
  {
    label: 'ReactJS',
    value: 'ReactJS',
  },
  {
    label: 'Backbone',
    value: 'Backbone',
  },
  {
    label: 'ReactNative',
    value: 'ReactNative',
  },
  {
    label: 'Vue',
    value: 'Vue',
  },
];

class JDPickierExample extends React.Component {
  state = {
    language: 'Java',
    show: false,
  };

  render() {
    return (
      <PageContainer title={this.props.title} bodyStyle={styles.bodyPanel}>
        <JDButton onPress={this.onShow}>
          <JDThemeText style={{color: '#FFF'}}>当前值: {this.state.language}</JDThemeText>
        </JDButton>
        <JDPicker
          show={this.state.show}
          onClose={this.onClose}
          selectedValue={this.state.language}
          onValueChange={(lang) => this.setState({language: lang, show: false})}>
          { PICKER_CONFIGS.map((item, index) => 
          (
            <View style={{height:40, justifyContent: 'center'}} value={item.value} key={index} >
              <JDThemeText>{item.label}</JDThemeText>

            </View>
            // <JDPicker.Item label={item.label} value={item.value} key={item.value} />
          )) }
        </JDPicker>
      </PageContainer>
    );
  }

  onClose = () => {
    this.setState({show: false,})
  };

  onShow = () => {
    this.setState({show: true});
  };
}

const styles = StyleSheet.create({
  bodyPanel: {
    padding: JDDevice.getRpx(20),
  },
});

module.exports = JDPickierExample;