backgroundColor 在 react-native-elements 的输入中隐藏 clearButtonMode 的 X

Question

  <Input
    autoFocus
    containerStyle={styles.search}
    placeholder="Search..."
    onChangeText={this.Search}
    inputContainerStyle={{ borderBottomWidth: 0 }}
    clearButtonMode="always"
    placeholderTextColor={theme.firstColor.hex}
  />

const styles = StyleSheet.create({
  search: {
    backgroundColor: "white", // <--- This is hiding the X button
    paddingLeft: 20,
    borderRadius: 10,
    borderColor: theme.secondColor,
    width: 300,
    height: 50,
  }
});

基本上，backgroundColor: "white" 隐藏了 clearButtonMode 的 X 按钮，有什么解决方法吗？

Answer 1

根据我的研究，react-native-elements 尚不支持 Input 清除按钮样式。

所以，我认为你应该尝试自定义它，像这样：

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

<Input
    ...
    rightIcon={
        <Icon
            containerStyle={{
                marginRight: normalize(10)
            }}
            name={'ios-close'} type={'ionicon'} color="#7384B4" size={22}
            onPress={() => {
                this.setState({email: ''});
            }}
        />
    }
/>

希望对你有帮助^^。

backgroundColor 在 react-native-elements 的输入中隐藏 clearButtonMode 的 X

backgroundColor hiding the clearButtonMode's X in Input of react-native-elements

react-native

react-native-elements