ipanel-rnapp-ajb-base 1.0.13 → 1.0.15

package/app/components/common/PickerV2Base/picker/index.tsx

@@ -0,0 +1,85 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react'
+import { mergeProps } from '../_util/with-default-props'
+import {
+  PickerColumn,
+  PickerColumnItem,
+  PickerValue,
+  PickerValueExtend,
+} from '../picker-view/PropsType'
+import { getColumns, getValueExtend } from '../picker-view/columns-extend'
+import RMCPicker, { PickerRef } from './Picker'
+import { PickerPropsType } from './PropsType'
+
+export interface PickerProps extends PickerPropsType {}
+export { PickerColumn, PickerColumnItem, PickerValue, PickerValueExtend }
+
+const defaultProps = {
+  defaultValue: [],
+  cols: 3,
+  cascade: true,
+}
+
+const Picker = forwardRef<PickerRef, PickerProps>((props, ref) => {
+  const p = mergeProps(defaultProps, props)
+
+  const [innerValue, setInnerValue] = useState<PickerValue[]>(
+    p.value === undefined ? p.defaultValue : p.value,
+  )
+
+  const pickerRef = React.useRef<PickerRef>(null)
+
+  useImperativeHandle(ref, () => pickerRef.current as PickerRef)
+
+  const columns = useMemo(
+    () => getColumns(p.data, innerValue, p.cols, p.cascade),
+    [p.data, innerValue, p.cols, p.cascade],
+  )
+
+  const handleSelect = useCallback(
+    (val: PickerValue, index: number) => {
+      const value = innerValue?.slice?.(0) || []
+      value[index] = val
+      const { nextValue } = getValueExtend(p.data, value, p.cols, p.cascade)
+      setInnerValue(nextValue)
+      p.onPickerChange?.(nextValue, index)
+    },
+    [p, innerValue, setInnerValue],
+  )
+
+  const onVisibleChange = useCallback(
+    (visible) => {
+      p.onVisibleChange?.(visible)
+      if (!visible && p.value !== innerValue) {
+        // 关闭时，如果选中值不同步，恢复为原选中值
+        setInnerValue(p.value || [])
+      }
+    },
+    [innerValue, p],
+  )
+
+  useEffect(() => {
+    setInnerValue(p.value || [])
+  }, [p.value])
+
+  return (
+    <RMCPicker
+      {...p}
+      innerValue={innerValue}
+      columns={columns}
+      handleSelect={handleSelect}
+      onVisibleChange={onVisibleChange}
+      ref={pickerRef}
+    />
+  )
+})
+
+Picker.displayName = 'AntmPicker'
+
+export default Picker

package/app/components/common/PickerV2Base/picker/index.zh-CN.md

@@ -0,0 +1,97 @@
+---
+category: Components
+type: Data Entry
+title: Picker
+subtitle: 选择器
+---
+
+在一组预设数据中进行选择，e.g. 省市区选择。
+
+### 规则
+- 尽量使用 Picker 来帮助用户完成输入，避免用户通过键盘直接输入。
+- DatePicker 是 Picker 的特定模式。
+
+## API
+
+### 属性
+
+```ts
+type PickerColumnItem = {
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+}
+
+type PickerColumn = PickerColumnItem[]
+
+type PickerValue = string | number
+
+type PickerValueExtend = {
+  columns: PickerColumn[]
+  items: (PickerColumnItem | undefined)[]
+}
+```
+
+属性 | 说明 | 类型 | 默认值 | 版本
+----|-----|------|-------|------
+| data  | 数据源     | `PickerColumn` / `PickerColumn[]` | -   |  |
+| value  | 选中项  | `PickerValue[]`  | -   |  |
+| defaultValue  | 默认选中项  | `PickerValue[]`  | -   |  |
+| cascade  | 是否级联。<br/>子级来自`data`参数内的`children`   | Boolean | `true` |  |
+| cols     | 列数    | Number | `3` |  |
+| onChange | 选中后的回调，可使用[rc-form](https://github.com/react-component/form) | `(value: PickerValue[], extend: PickerValueExtend) => void`      | -   |  |
+| onPickerChange | 每列数据选择变化后的回调函数   | `(value: PickerValue[], index: number) => void` | - |  |
+| onVisibleChange  | 当显隐状态变化时回调函数    | `(visible: bool): void` |  -   |  |
+| renderLabel | 	自定义渲染每列展示的内容  |   `(item: PickerColumnItem, index: number) => ReactNode`   | `(item) => item.label`  |  |
+| locale | 国际化，可覆盖全局[LocaleProvider](/components/locale-provider-cn)的配置 | Object: {okText, dismissText, extra} | - |  |
+| title  | 大标题 | ReactNode | - |  |
+| okText | 选中的文案 | String |  `确定`  |  |
+| dismissText  | 取消选中的文案 | String |  `取消`  |  |
+| onOk   | 点击选中时执行的回调  | `(value: PickerValue[], extend: PickerValueExtend) => void`  |  - |  |
+| onDismiss  | 点击取消时执行的回调 | (): void  |  -  |  |
+| okButtonProps  | ok 按钮 props | [TouchableHighlightProps](https://reactnative.dev/docs/touchablehighlight)  |  `{ activeOpacity:1, underlayColor:'#ddd' }`  | `5.1.3` |
+| dismissButtonProps  | dismiss 按钮 props | [TouchableHighlightProps](https://reactnative.dev/docs/touchablehighlight)  |  `{ activeOpacity:1, underlayColor:'#ddd' }`  | `5.1.3` |
+| visible  | 是否显示选择器	  | Boolean | -  |  |
+| loading  | 是否处于加载状态  | Boolean | -  |  |
+| loadingContent  | 加载状态下展示的内容  | ReactNode | -  |  |
+| indicatorStyle  | 默认Indicator的样式  | Object | -  |  |
+
+### 自定义样式
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| style    | 外部样式   | `StyleProp<ViewStyle>` | -   |
+| styles   | 内部组件样式集   | 同 [PickerViewStyle](/components//picker-view-cn/#pickerviewstyle-语义化样式) | -   |
+| itemStyle| 每列样式   | `StyleProp<TextStyle>` | -   |
+| itemHeight | 每列固定高度，未设值时会根据`numberOfLines`动态计算；`itemStyle`属性设置`{height}`值是无效的  |   Number   | -  |
+| numberOfLines | 允许每列显示行数  |   Number   | `1`  |
+
+#### 遮罩层
+还支持自定义遮罩样式，如使用渐变组件`<LinearGradient />`。当前默认为白色半透明。
+
+属性 | 说明 | 类型 | 默认值
+----|-----|------|------
+| renderMaskTop | 自定义渲染上半部分遮罩层 | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+| renderMaskBottom | 自定义渲染下半部分遮罩层 | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+
+### 自定义Children
+通常是 [List.Item](/components/list-cn/#List.Item) ，以下属性也是围绕着`List.Item`展开：
+
+属性 | 说明 | 类型 | 默认值 | 版本
+----|-----|------|------|------
+| children| Picker占位组件，通常是`List.Item` | `ReactNode` / `({extra, value, toggle})=>ReactNode`  |  -  | `5.2.0`新增函数作为Children |
+| extra   | Picker children的`extra`属性，无选中项时展示 | String |  `请选择`  |  |
+| format  | 格式化选中值的函数，用于回显在`extra`属性上  | (labels: string[]): any | `(labels) => { return labels.join(','); } ` |  |
+| triggerType  | 按钮事件名称 | String | `onPress` |  |
+| disabled  | 是否不可用 | Boolean | `false` |  |
+
+### PickerActions
+属性 | 说明 | 类型
+----|-----|------
+| close |关闭 Picker|`() => void`|
+| open  |显示 Picker|`() => void`|
+| toggle|切换 Picker 的显示和隐藏状态|`() => void`|
+
+### Ref
+同 PickerActions

package/app/components/common/PickerV2Base/picker/locale/en_US.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'Ok',
+  dismissText: 'Cancel',
+  extra: 'please select',
+}

package/app/components/common/PickerV2Base/picker/locale/es_ES.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'OK',
+  dismissText: 'Cancelar',
+  extra: 'Seleccione',
+}

package/app/components/common/PickerV2Base/picker/locale/fa_IR.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'تایید',
+  dismissText: 'لغو',
+  extra: 'لطفا انتخاب کنید',
+}

package/app/components/common/PickerV2Base/picker/locale/id_ID.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'Ok',
+  dismissText: 'Cancel',
+  extra: 'please select',
+}

package/app/components/common/PickerV2Base/picker/locale/ko_KR.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: '확인',
+  dismissText: '취소',
+  extra: '선택해주세요',
+}

package/app/components/common/PickerV2Base/picker/locale/pt_BR.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'Ok',
+  dismissText: 'Cancelar',
+  extra: 'Selecione',
+}

package/app/components/common/PickerV2Base/picker/locale/ru_RU.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'Ок',
+  dismissText: 'Отмена',
+  extra: '',
+}

package/app/components/common/PickerV2Base/picker/locale/sv_SE.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: 'Ok',
+  dismissText: 'Avbryt',
+  extra: 'vänligen välj',
+}

package/app/components/common/PickerV2Base/picker/locale/zh_CN.tsx

@@ -0,0 +1,5 @@
+export default {
+  okText: '确定',
+  dismissText: '取消',
+  extra: '请选择',
+}

package/app/components/common/PickerV2Base/picker/style/index.tsx

@@ -0,0 +1,57 @@
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native'
+
+export interface PickerStyle {
+  modal: ViewStyle
+  container: ViewStyle
+  header: ViewStyle
+  headerItem: ViewStyle
+  actionText: TextStyle
+  title: TextStyle
+  okText: TextStyle
+  dismissText: TextStyle
+  maskColor:ViewStyle
+  okView:ViewStyle
+  dismissView:ViewStyle
+}
+
+export default () =>
+  StyleSheet.create<PickerStyle>({
+    modal: {
+      flex: 1,
+      flexDirection: 'column',
+      justifyContent: 'flex-end',
+      // backgroundColor: 'rgba(0,0,0,.6)'  
+    },
+    container: {},
+    header: {
+      height: 44,
+      alignItems: 'center',
+      flexDirection: 'row',
+      justifyContent: 'center',
+      borderBottomWidth: 1,
+      borderBottomColor: '#e7e7e7',
+    },
+    headerItem: {
+      height: 44,
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    actionText: {
+      color: '#0ae',
+      fontSize: 18,
+      textAlign: 'center',
+    },
+    okText: {},
+    okView:{},
+    dismissText: {},
+    dismissView:{},
+    title: {
+      color: '#666',
+      fontSize: 18,
+      textAlign: 'center',
+    },
+    maskColor:{
+     backgroundColor: 'rgba(0,0,0,.6)' 
+    }
+  })

package/app/components/common/PickerV2Base/picker-view/PropsType.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+import { StyleProp, TextStyle, ViewStyle } from 'react-native'
+
+export type PickerValue = string | number
+
+export type PickerValueExtend = {
+  columns: PickerColumn[]
+  items: (PickerColumnItem | undefined)[]
+}
+
+export type PickerColumnItem = {
+  label: string | ReactNode
+  value: string | number
+  key?: string | number
+  children?: PickerColumnItem[]
+}
+
+export type PickerColumn = PickerColumnItem[]
+
+export interface PickerViewPropsType {
+  value?: PickerValue[]
+  defaultValue?: PickerValue[]
+  data: PickerColumn | PickerColumn[]
+  cols?: number
+  cascade?: boolean
+  loading?: boolean
+  loadingContent?: ReactNode
+  numberOfLines?: number
+  style?: StyleProp<ViewStyle>
+  itemStyle?: StyleProp<TextStyle>
+  itemHeight?: number
+  indicatorStyle?: StyleProp<ViewStyle>
+  onChange?: (value: PickerValue[], extend: PickerValueExtend) => void
+  renderLabel?: (item: PickerColumnItem, index: number) => ReactNode
+  renderMaskTop?: () => ReactNode
+  renderMaskBottom?: () => ReactNode
+}

package/app/components/common/PickerV2Base/picker-view/Wheel.tsx

@@ -0,0 +1,200 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  Platform,
+  ScrollView,
+  View,
+} from 'react-native'
+
+type ColumnItem = {
+  label: string | ReactNode
+  value: string | number
+}
+type Value = string | number
+
+type Props = {
+  index: number
+  column: ColumnItem[]
+  value?: Value
+  onSelect: (value: Value, index: number) => void
+  renderLabel: (item: ColumnItem, index: number) => ReactNode
+  itemHeight: number
+  wheelHeight: number
+}
+
+class Wheel extends React.Component<Props> {
+  scrollerRef: any
+
+  scrollBuffer: number
+
+  selectValue: any
+  isScrolling: boolean
+
+  componentDidMount() {
+    const { value, column, itemHeight } = this.props
+    setTimeout(() => {
+      this.scrollTo(this.getSelectIndex(column, value) * itemHeight)
+    })
+  }
+
+  shouldComponentUpdate(nextProps: Props) {
+    const { value, column, itemHeight, wheelHeight } = nextProps
+    if (
+      value !== this.props.value ||
+      itemHeight !== this.props.itemHeight ||
+      wheelHeight !== this.props.wheelHeight
+    ) {
+      this.scrollTo(this.getSelectIndex(column, value) * itemHeight)
+      return true
+    }
+    return column !== this.props.column
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    const { column } = prevProps
+    if (column !== this.props.column) {
+      this.scrollTo(
+        this.getSelectIndex(this.props.column, this.props.value) *
+          this.props.itemHeight,
+      )
+    }
+  }
+
+  scrollTo = (y: any) => {
+    this.scrollerRef?.scrollTo?.({
+      y,
+      animated: false,
+    })
+  }
+
+  getSelectIndex(column: ColumnItem[], value?: Value) {
+    return Math.max(
+      column.findIndex((item) => item.value === value),
+      0,
+    )
+  }
+
+  handleSelect = () => {
+    if (this.props.value !== this.selectValue && this.props.onSelect) {
+      this.props.onSelect(this.selectValue, this.props.index)
+    }
+
+    setTimeout(() => {
+      this.scrollTo(
+        this.getSelectIndex(this.props.column, this.props.value) *
+          this.props.itemHeight,
+      )
+    })
+  }
+
+  onScrollEndForWeb = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    e.persist?.()
+    let contentOffset = e.nativeEvent.contentOffset
+    // android/web hack
+    if (!contentOffset) {
+      //@ts-ignore
+      const { position } = e.nativeEvent
+      contentOffset = {
+        x: 0,
+        y: position * this.props.itemHeight,
+      }
+    }
+
+    const selectIndex = Math.round(contentOffset.y / this.props.itemHeight)
+    if (this.props.column[selectIndex]) {
+      this.selectValue = this.props.column[selectIndex].value
+      if (!this.isScrolling) {
+        this.updateSelectThrottle()
+      }
+    }
+  }
+
+  /*** for web event ***/
+  onTouchStartForWeb = () => {
+    this.isScrolling = true
+  }
+  onTouchEndForWeb = () => {
+    this.isScrolling = false
+    this.updateSelectThrottle()
+  }
+  onScrollForWeb = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    this.onScrollEndForWeb(e)
+  }
+  updateSelectThrottle = () => {
+    clearTimeout(this.scrollBuffer)
+    this.scrollBuffer = setTimeout(() => {
+      this.handleSelect()
+    }, 100) //idle time
+  }
+
+  onMomentumScrollBegin = () => {
+    this.isScrolling = true
+  }
+  onMomentumScrollEnd = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+    e.persist?.()
+    if (this.isScrolling) {
+      let contentOffset = e.nativeEvent.contentOffset
+      // android/web hack
+      if (!contentOffset) {
+        //@ts-ignore
+        const { position } = e.nativeEvent
+        contentOffset = {
+          x: 0,
+          y: position * this.props.itemHeight,
+        }
+      }
+      const selectIndex = Math.round(contentOffset.y / this.props.itemHeight)
+      if (this.props.column[selectIndex]) {
+        this.selectValue = this.props.column[selectIndex].value
+        this.handleSelect()
+      }
+    }
+    this.isScrolling = false
+  }
+
+  renderItems = () => {
+    const { column, renderLabel, itemHeight, wheelHeight } = this.props
+    return (
+      <View
+        style={{
+          paddingVertical: (wheelHeight - itemHeight) / 2,
+        }}>
+        {column.map((item, index) => renderLabel(item, index))}
+      </View>
+    )
+  }
+
+  render() {
+    return (
+      <ScrollView
+        style={{ flex: 1 }}
+        nestedScrollEnabled
+        horizontal={false}
+        ref={(el: any) => (this.scrollerRef = el)}
+        showsHorizontalScrollIndicator={false}
+        showsVerticalScrollIndicator={false}
+        pagingEnabled={false}
+        automaticallyAdjustContentInsets={false}
+        directionalLockEnabled={true}
+        decelerationRate="fast"
+        snapToInterval={this.props.itemHeight}
+        {...(Platform.OS === 'web'
+          ? {
+              onTouchStart: this.onTouchStartForWeb,
+              onTouchEnd: this.onTouchEndForWeb,
+              onScroll: this.onScrollForWeb,
+              scrollEventThrottle: 16,
+            }
+          : {
+              onMomentumScrollBegin: this.onMomentumScrollBegin,
+              onMomentumScrollEnd: this.onMomentumScrollEnd,
+            })}>
+        {this.renderItems()}
+      </ScrollView>
+    )
+  }
+}
+
+export default Wheel

package/app/components/common/PickerV2Base/picker-view/columns-extend.tsx

@@ -0,0 +1,86 @@
+import { PickerColumn, PickerValue } from './PropsType'
+
+export function getColumns(
+  d: PickerColumn | PickerColumn[],
+  val: PickerValue[],
+  cols: number,
+  cascade: boolean,
+): PickerColumn[] {
+  if (!d || d.length === 0) {
+    return []
+  }
+
+  if (!cascade) {
+    // when d is PickerColumn
+    if (!Array.isArray(d[0])) {
+      return [d as PickerColumn]
+    }
+    // when d is PickerColumn[]
+    return (d as PickerColumn[]).slice(0, cols!)
+  }
+
+  // cascade data
+  const columns = []
+  let currentOptions = (d as PickerColumn).slice()
+  let selected = val || []
+  let i = 0
+  while (i < cols!) {
+    columns.push(
+      currentOptions.map((option: any) => ({
+        label: option.label,
+        value: option.value,
+      })),
+    )
+    const x = selected[i]
+    const targetOptions =
+      currentOptions.find((option: any) => option.value === x) ||
+      currentOptions[0]
+    if (!targetOptions.children) {
+      break
+    }
+    currentOptions = targetOptions.children
+    i++
+  }
+  return columns
+}
+
+export function getValueExtend(
+  d: PickerColumn | PickerColumn[],
+  val: PickerValue[],
+  cols: number,
+  cascade: boolean,
+) {
+  if (!d || d.length === 0) {
+    return { nextValue: [], extend: [] }
+  }
+
+  if (!cascade) {
+    const columns = getColumns(d, val, cols, false).map(
+      (column: PickerColumn, index: number) =>
+        column.find((item) => item.value === val[index]) ?? column[0],
+    )
+
+    return { nextValue: columns.map((item) => item.value), extend: columns }
+  }
+
+  // cascade data
+  let currentOptions = (d as PickerColumn).slice()
+  const nextValue = []
+  const extend = []
+  let selected = val || []
+  let i = 0
+  while (i < cols!) {
+    const x = selected[i]
+    const targetOptions =
+      currentOptions.find((option: any) => option.value === x) ||
+      currentOptions[0]
+    nextValue[i] = targetOptions.value
+    extend[i] = targetOptions
+    if (!targetOptions.children) {
+      break
+    }
+    currentOptions = targetOptions.children
+    i++
+  }
+  return { nextValue, extend }
+}

package/app/components/common/PickerV2Base/picker-view/index.en-US.md

@@ -0,0 +1,71 @@
+---
+category: Components
+type: Data Entry
+title: PickerView
+---
+
+PickerView's functions like Picker, but it is rendered directly in the area instead of the pop-up window.
+
+## API
+
+### Props
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| data     | data source     | `PickerColumn` / `PickerColumn[]` | -   |
+| value    | Selected options	  | `PickerValue[]`  | -   |
+| defaultValue  | Default selected options  | `PickerValue[]`  | -   |
+| cascade  | whether cascade <br/>child cascade get from `data[].children`   | Boolean | `true` |
+| cols     | col numbers    | Number | `3` |
+| onChange | selected callback function, can use [rc-form](https://github.com/react-component/form) | `(value: PickerValue[], extend: PickerValueExtend) => void`      | -   |
+| renderLabel | 	The function to custom rendering the label shown on a column  |   `(item: PickerColumnItem, index: number) => ReactNode`   | `(item) => item.label`  |
+| loading  | Should the Picker displays as loading state	  | Boolean | -  |
+| loadingContent  | The loading content displayed in loading state	  | ReactNode | `<ActivityIndicator/>`  |
+| indicatorStyle  | style of default Indicator  | Object | -  |
+
+For the type definition of  `PickerColumnItem` `PickerColumn` `PickerValue` `PickerValueExtend`, please refer to the document of [Picker](/components/picker/).
+
+### Custom Style
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| style    | style   | `StyleProp<ViewStyle>` | -   |
+| styles   | Semantic DOM style   | [PickerViewStyle](#pickerviewstyle-interface) | -   |
+| itemStyle| style to apply to each of the item labels   | `StyleProp<TextStyle>` | -   |
+| itemHeight | Height of option item, calculated by `numberOfLines` when without value; `itemStyle` was not allowed to set `{height}`  |   Number   | -  |
+| numberOfLines | Used to truncate the text with an ellipsis after computing the text layout, including line wrapping, such that the total number of lines does not exceed this number  |   Number   | `1`  |
+
+#### PickerViewStyle interface
+
+```jsx
+interface PickerViewStyle {
+  wrappper: ViewStyle
+  wheelWrapper: ViewStyle
+  mask: ViewStyle
+  maskTop: ViewStyle
+  maskMiddle: ViewStyle
+  maskBottom: ViewStyle
+}
+```
+
+#### Mask View
+
+Support custom mask style, such as using the gradient component `<LinearGradient />`. Default is white translucency.
+
+Properties | Descrition | Type | Default
+-----------|------------|------|--------
+| renderMaskTop | The function to custom rendering the mask top half view | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+| renderMaskBottom | The function to custom rendering the mask bottom half view | `()=> ReactNode` | `<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.8)' }} />` |
+
+## FAQ
+
+### On the Android platform, when using `PickerView` nested in `ScrollView`, the Picker Item cannot slide. What should I do?
+
+Support in `5.1.3`. Set the `nestedScrollEnabled` property of `ScrollView` to `true`.
+
+```jsx
+<ScrollView nestedScrollEnabled={true}>
+  ...
+  <PickerView />
+</ScrollView>
+```