如何为react-native-elements的Input组件给容器添加禁用样式？

不用额外维护状态，直接利用现有disabled的判断条件就能实现，给你两个实用方法：

方法一：动态拼接容器样式 #

直接根据!searchResultId这个禁用条件，给外层容器或输入框外围容器追加禁用样式，不用额外加state：

<Input
  placeholder="Select"
  containerStyle={{
    // 你的默认容器样式
    ...,
    // 禁用时追加的最外层容器样式
    ...(!searchResultId ? { backgroundColor: 'grey', opacity: 0.7 } : {})
  }}
  inputContainerStyle={{
    // 你的默认输入框容器样式
    ...,
    // 禁用时追加的输入框+图标容器样式
    ...(!searchResultId ? { backgroundColor: 'grey' } : {})
  }}
  disabled={!searchResultId}
  disabledInputStyle={{backgroundColor: "grey"}}
  leftIcon={
       <Icon
          name="arrow-drop-down"
          type="materialicons"
       />
  }
/>

其中containerStyle对应组件最外层容器，inputContainerStyle是包裹输入框和图标的内层容器，根据你的视觉需求选一个添加禁用样式即可。

方法二：封装复用组件 #

如果多处需要这种带禁用容器样式的Input，直接封装一个自定义组件，把样式判断逻辑封装进去：

import { Input } from 'react-native-elements';

const CustomDisabledInput = ({ disabled, containerStyle, inputContainerStyle, ...props }) => {
  const disabledContainerStyle = disabled ? { backgroundColor: 'grey', opacity: 0.7 } : {};
  const disabledInputContainerStyle = disabled ? { backgroundColor: 'grey' } : {};

  return (
    <Input
      disabled={disabled}
      containerStyle={{ ...containerStyle, ...disabledContainerStyle }}
      inputContainerStyle={{ ...inputContainerStyle, ...disabledInputContainerStyle }}
      disabledInputStyle={{ backgroundColor: 'grey' }}
      {...props}
    />
  );
};

// 使用示例
<CustomDisabledInput
  placeholder="Select"
  disabled={!searchResultId}
  leftIcon={<Icon name="arrow-drop-down" type="materialicons" />}
/>

后续使用时不用重复写样式判断逻辑，直接传disabled状态即可。

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