无法手动选择NativeBase Picker？自定义PickerUF组件实现巴西州选择

我之前也踩过NativeBase Picker无法手动选择的坑，为了方便处理巴西州的选择需求，特意封装了一个PickerUF组件，分享给大家参考：

import React, { Component } from "react";
import { StyleSheet, Platform } from "react-native";
import { Picker } from 'native-base'

export default class PickerUF extends Component {
  constructor(props) {
    super(props);
  }

  state = { selectedUF: this.props.value };

  render() {
    const pickerItems = UFList.map(uf => {
      return ( <Picker.Item key={uf.sigla} label={uf.sigla} value={uf.sigla} /> );
    });

    if (Platform.OS === 'android') {
      // 这里可以补充Android端专属的兼容修复逻辑
      // 比如调整Picker高度、优化弹出选择框的交互体验等
    }

    return (
      <Picker
        selectedValue={this.state.selectedUF}
        onValueChange={(itemValue) => {
          this.setState({ selectedUF: itemValue });
          // 触发父组件回调，同步选中值
          this.props.onChange?.(itemValue);
        }}
        style={styles.picker}
      >
        {pickerItems}
      </Picker>
    );
  }
}

const styles = StyleSheet.create({
  picker: {
    width: '100%',
    // 根据业务需求补充通用样式
  }
});

核心细节说明： #

• 组件初始化时通过props.value同步默认选中的州，保证与父组件状态一致
• 基于UFList（存储巴西州缩写与信息的数组）批量生成选择项，确保选项完整覆盖所有巴西州
• 单独预留了Android平台的代码分支，因为NativeBase Picker在Android端常出现交互或样式兼容问题，可针对性补充修复逻辑
• 实现了可选的onChange回调，选中州后能将值同步给父组件，适配业务场景的数据传递需求

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