NativeBase：如何禁用选择器？

Posted 2023-02-25

【中文标题】NativeBase：如何禁用选择器？

【英文标题】：NativeBase: How to make Picker disabled?

【发布时间】：2017-10-07 16:14:08

【问题描述】：

我正在使用来自NativeBase 的Picker 组件，我想根据条件禁用它。

有一个名为enabled 的属性仅适用于android，那么ios 呢？

谢谢。

【问题讨论】：

尝试将 pointerEvents="none" 设置为 Picker 的父视图。让我知道它是否适合你。 pointerevents

@ShukarullahShah 它不适用于 iOS。

我有同样的问题...在 IOS 上不起作用

ShukarullahShah 和 Hossam Mourad 在下面看到我的答案，我找到了解决它的技巧。

【参考方案1】：

在当前源代码中，renderButton 方法中缺少 DISABLED 参数，参见：https://github.com/GeekyAnts/NativeBase/blob/master/src/basic/Picker.ios.js

我解决了这个问题，将函数 renderButton 传递给 Picker 组件，在其中我将 disabled 属性传递给 Button，请参见下面的示例：

 renderOptionFieldSOF( props : Object, fieldName : String, optionItems : Array, disabled : Boolean, placeHolderText : String) 
const width = Dimensions.get("window");    
const buttonStyle = backgroundColor: disabled ? "#rgb(200,200,200)" : "transparent" , width: width - 20;
return (<Picker
      mode="dialog"
      enabled=!disabled /*This works only on Android*/
      renderButton=
        (onPress, text, picker, selectedItem ) => 
          return (
          <Button
          style=buttonStyle
          dark
          picker
          transparent
          onPress=onPress
          disabled=disabled /*This will disable user interaction on IOS*/
          >
          selectedItem ? (
            <Text style=this.props.textStyle note=this.props.note>
              text
            </Text>
          ) : (
              <Text
                style=[this.props.textStyle, this.props.placeholderStyle]
                note=this.props.note === false ? false : true>
                placeHolderText
              </Text>
            )
        </Button> 
        )
      
      >
 
   optionItems && optionItems.map( (item) => (<Item label=item.Name value=item.Key key=item.Key/>))
 
</Picker>);

为我工作。