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

debugcn 发表于 Dev

阿德南·埃科切维奇（Adnan Erkocevic）

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

雷诺阿罗德

我首先阅读了官方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，我们将文本颜色设置为使用的颜色样式，因此您可以尝试使用disableInputStyle，并设置所需的颜色。

 <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'
/>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。