不要将 React Native Elements 中的 Disabled Input 变灰

Question

我正在尝试更改禁用的 React-native-elements 组件输入的颜色。默认行为是将所有内容变灰，但我希望文本为纯黑色，即使它被禁用也是如此。有没有人知道如何做？

Answer 1

先看了官方API，找到了disabledInputStyle，然后再看react-naive-element里面的Input source

...
Input.defaultProps = {
  InputComponent: TextInput,
};
...
// here find it defalut use textinput in react-native,and when disable true,use the disalbeInputStyle
render(){
<View style={StyleSheet.flatten([styles.container, containerStyle])}>
        ....
          <InputComponent
            testID="RNE__Input__text-input"

 underlineColorAndroid="transparent"
            editable={!disabled}
            {...patchWebProps(attributes)}
            ref={ref => {
              this.input = ref;
            }}
            style={StyleSheet.flatten([
              styles.input,
              inputStyle,
              disabled && styles.disabledInput,
              disabled && disabledInputStyle,
            ])}
          />
...
</View>
}

对于react-native中的TextInput，我们设置文字颜色使用color style 所以你可以尝试使用disabledInputStyle，并设置你想要的颜色。

 <Input
        disabled={true}
        value={"ddd"}
        disabledInputStyle={{color:'red',opacity:1}} //chanage which color you want
        placeholder='INPUT WITH ERROR MESSAGE'
        errorStyle={{ color: 'red' }}
        errorMessage='ENTER A VALID ERROR HERE'
/>

Answer 2

将 disabledInputStyle 属性设置为 opacity: 1

disabledInputStyle={{opacity: 1}}

不要将 React Native Elements 中的 Disabled Input 变灰

Don't grey out Disabled Input in React Native Elements

react-native

react-native-elements