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

Posted 2023-02-23

【中文标题】在输入组件中添加清除按钮

【英文标题】：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.

It's suppose to look like this

<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状态

【参考方案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