TextInput 右侧的 React-Native 图标

Question

我想实现什么目标

我目前在反应本机的 TextInput 中面临样式问题。我想要实现的是在 TextInput 中显示一个图标。

现在的情况

使用以下代码创建 TextInput。

                        <TextInput
                            placeholder={translationStrings.searchPlaceHolder}
                            style={styles.searchStyling}
                        />

如下所示：

现在的情况

我想实现什么目标：

希望的情况

有人知道如何做到这一点吗？

Answer 1

这就是我实现它的方式

searchBar = () => {
    return (
      <View style={{ flexDirection:'row' , alignItems:'center'}}>

        <TextInput
          placeholder="Search your issues                                      "
          keyboardShouldPersistTaps
          onChangeText={text => this.props.chnageInputText(text.toLowerCase())}
        />
        <Image
          style={faqStyles.imT}
          source={require('../assets/images/maglass1.png')}
        />
      </View>
    );
  };

这就是我通过将图像和文本输入包装在视图中来制作自定义搜索栏的方法>我总是更喜欢使用自定义组件而不是外部库。试试这个，希望有帮助。如有疑问，请放心。

请看下图，这就是我所取得的成就。我为您反转了文本输入和放大镜图像等元素。