如何将React Native类组件实现的下拉框代码改写为函数组件？

React Native 下拉框类组件转函数组件实现 #

转换采用 React 内置的 useState Hook 替代类组件的 state 管理，无需额外绑定 this 上下文，最终代码如下：

import React, { useState } from 'react';
import { View, AppRegistry } from 'react-native';
import Dropdown from 'react-native-modal-select-option';

const propsDropdown = {
  defaultValue: {value: 5, label: 'Kebumen'},
  options: [
    {value: 1, label: 'Bandung'},
    {value: 2, label: 'Surabaya'},
    {value: 3, label: 'Palembang'},
    {value: 4, label: 'Jakarta'},
  ],
  label: 'Your City',
  animationType: 'none',
};

// 若项目未使用TypeScript可直接删除此段类型定义
type State = {
  selectedOption: Object,
  isShowingOptions: boolean;
};

const DropdownDemo = () => {
  // 状态初始化与原类组件初始值完全一致
  const [selectedOption, setSelectedOption] = useState(
    propsDropdown.defaultValue || {value: 0, label: 'Pilih Kota'}
  );
  const [isShowingOptions, setIsShowingOptions] = useState(false);

  // 下拉框展开/收起回调
  const handleShow = (value: boolean): void => {
    setIsShowingOptions(value);
  };

  // 选项选中回调
  const handleSelect = (item: Object, isShow: boolean): void => {
    setIsShowingOptions(isShow);
    setSelectedOption(item);
  };

  return (
    <View style={{flex: 1, padding: 10, paddingTop: 50}}>
      <Dropdown 
        {...propsDropdown}
        onSelect={handleSelect}
        onShow={handleShow}
        isShowingOptions={isShowingOptions}
        selectedOption={selectedOption}
      />
    </View>
  );
};

export default DropdownDemo;
AppRegistry.registerComponent('SandboxRn', () => DropdownDemo);

内容的提问来源于stack exchange，提问作者Ryan Fonseka