Question

我正在尝试更改禁用的React-native-elements组件Input的颜色。默认行为是将所有内容显示为灰色，但是即使禁用了文本，我也希望将其保留为纯黑色。有任何技巧提示吗？

Answer 1

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

...
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}}

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

2 个答案: