不要灰显React Native Elements中禁用的输入

Question

我正在尝试更改已禁用的React-native-elements组件输入的颜色。默认行为是灰显所有东西，但我希望有纯黑的文本颜色，即使它是禁用的。有谁有怎么做的建议吗？

Answer 1

我首先阅读了官方API并找到了disabledInputStyle，然后查看了react-naive-element中的输入源。

...
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，我们设置了文本颜色使用的颜色样式，以便您可以尝试使用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}}