在输入组件中添加清除按钮答案

【问题标题】：Add clear button inside input component在输入组件中添加清除按钮
【发布时间】：2021-12-25 16:06:37
【问题描述】：

我正在尝试在 Input 组件中添加一个明文按钮，但我似乎无法弄清楚。

这是我管理的最接近的，但不太正确。

You can see the clear text icon "X" shorten the input container.

<Block row noflex space="between" paddingLeft="2x">
  <Input
    flex
    value={search}
    iconLeft="search"
    radius={SIZES.base / 2}
    style={styles.search}
    selectionColor={COLORS.white}
    iconStyle={styles.searchIcon}
    containerStyle={styles.searchContainer}
    color={Utils.rgba(COLORS.white, 0.3)}
    onFocus={() => onSearch()}
  />
  <Button 
    flex={0}
    color="transparent" center middle
    style={styles.clearIconStyle}
    onPress={() => setFilters({...filters, address: '', lat: gps.latitude, lng: gps.longitude })}
  >
  <Icon name="clear" />
 </Button>
</Block>

const styles = StyleSheet.create({
 right: SIZES.width * 0.07,
 bottom: SIZES.height * 0.003
}

任何关于如何解决此问题的建议将不胜感激。

【问题讨论】：

你可以创建一个带有flex方向行的视图并在textinput的左右添加按钮，然后在按下十字按钮时清除textinput状态

标签： reactjs react-native components

【解决方案1】：

最下面是我做的，你可以详细说明它来制作图片。

这是下面的代码，但基本上你所做的就是让视图成为线性渐变。然后在内部使用“透明”背景颜色制作另一个视图。

import React from 'react'
import { View, Text,Dimensions } from 'react-native'
import MaskedView from '@react-native-community/masked-view';
import { LinearGradient } from 'expo-linear-gradient';
const {width,height} = Dimensions.get("window");
import { FontAwesome } from '@expo/vector-icons'; 
import { Entypo } from '@expo/vector-icons'; 

const MaskScreen = () => {
    return (
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
           

        {/* Gradient block */}
        <LinearGradient
        // Background Linear Gradient
        colors={["purple","cyan","blue"]}
        style={{width:width*.85,height:height/12,flexDirection:'row'}}
        >
            <View style={{flex:10,margin:10,borderRadius:5,backgroundColor:'rgba(219, 229, 255, 0.8)',flexDirection:"row",justifyContent:'space-between',padding:10,alignItems:"center"}}>
                <FontAwesome name="search" size={30} color="black" />
                <Entypo name="cross" size={30} color="black" />
            </View>
            <View style={{flex:1}}>

            </View>
            
        </LinearGradient>
            
        </View>
    )
}

export default MaskScreen

【讨论】：