如何向 Tamagui 输入法添加图标？

Question

我正在使用 Tamagui Input 组件，我想向其添加图标。

我必须使用

<Stacks />

的组合来将按钮（带有图标）与我的

Input

组件水平对齐，如下所示：

const SearchBar = () => {
  return (
    <XStack alignItems="center">
      <Button 
        size="$4" 
        icon={<Search />} 
        marginRight="$-4" 
        borderTopLeftRadius="$4" 
        borderBottomLeftRadius='$4'
        borderTopRightRadius="$0" 
        borderBottomRightRadius="$0" 
        borderColor="$gray12Light"
        backgroundColor='$gray5Light'
        borderWidth="$0"
        borderRightWidth="$0"
      />
      <Input 
        placeholder='Searchword'
        flex={1} 
        borderColor="$gray12Light"
        focusStyle={{
          borderColor: '$gray12Light'
        }}
        borderWidth="$0"
        value={value}
        backgroundColor='$gray5Light'
        borderBottomLeftRadius='$4'
      />
      <Button 
        size="$4" 
        icon={<X/>} 
        display={value?.length ? 'flex' : 'none'}
        onPress={() => handleClear()} 
        marginLeft="$-4" 
        borderTopRightRadius="$4" 
        borderBottomRightRadius='$4'
        borderTopLeftRadius="$0" 
        borderBottomLeftRadius="$0" 
        borderColor="$gray12Light"
        backgroundColor='$gray5Light'
        borderWidth="$0"
        borderLeftWidth="$0"
      />
    </XStack>
  )
}

您会注意到我将

<Search />

图标和

<X />

图标包装在

Button

组件中。这似乎是对齐图标并能够设置背景颜色的唯一方法。

这将创建一个带有左对齐图标和右对齐图标的输入，如下所示：

Tamagui 是否提供任何可以将图标传递到我的输入中的道具？也许其他人有比我更好的解决方案？接受关于如何最好地处理这个问题的建议，因为我当前的实现似乎非常复杂。

我尝试使用

<Stack/>

但它不允许我覆盖颜色。但我觉得这仍然是同样的问题，它是一个用于处理输入上的图标的复杂布局。

这是使用

Stack

而不是

Button

的代码：

<XStack alignItems="center">
  <Stack
    marginRight="$-4" 
    borderTopLeftRadius="$4" 
    borderBottomLeftRadius='$4'
    borderTopRightRadius="$0" 
    borderBottomRightRadius="$0" 
    borderColor="$gray12Light"
    backgroundColor='$gray5Light'
    borderWidth="$0"
    borderRightWidth="$0"
  >
    <Search />
  </Stack>
  <Input 
    placeholder='Searchword'
    flex={1} 
    borderColor="$gray12Light"
    focusStyle={{
      borderColor: '$gray12Light'
    }}
    borderWidth="$0"
    value={value}
    backgroundColor='$gray5Light'
    borderBottomLeftRadius='$4'
  />
  ...

这就是它的结果：

Answer 1

这是我在我的应用程序中使用的最佳解决方法。

                    <YStack>
                        <XStack ai="center">
                            <MaterialIcons
                                style={{ marginRight: -40, marginLeft: 14, 
                                zIndex: 1 }}
                                name="email"
                                size={24}
                                color="gray"
                            />
                            <Input
                                f={1}
                                size="$5"
                                pl="$9"
                                inputMode="email"
                                value={value}
                                onChangeText={onChange}
                                onBlur={onBlur}
                                textContentType="emailAddress"
                                autoCapitalize="none"
                                autoCorrect={false}
                                placeholder="Enter your email address"
                                bc={errors.email ? '$tomato9' : '$color7'}
                            />
                        </XStack>
                        <YStack h={20}>
                            {error && (
                                <Text fos="$1" col="$tomato9" mt="$2" ml="$3">
                                    {error.message || 'Error'}
                                </Text>
                            )}
                        </YStack>
                    </YStack>