Question

我要实现的目标

我目前在ReactInput的TextInput上遇到样式问题。我想要实现的是在TextInput中显示一个图标。

当前情况

使用以下代码创建TextInput。

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

如下所示：

Current situation

我要实现什么？

Wished situation

有人知道该怎么做吗？

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>
    );
  };

这是香港专业教育学院如何通过将图像和textInput包装在“视图”中来制作自定义搜索栏的，我总是喜欢使用自定义组件，而不是外部库。试试这个，希望对您有所帮助。毫无疑问。

请参见下图，这是我所实现的。香港专业教育学院为您扭转了文字输入和放大镜图像等要素。

Answer 2

  import {Item,Input} from 'native-base'

  <Item>
  <Input>
  </Input>
  <TouchableOpacity>
  <Icon></Icon>
  </TouchableOpacity>
  </Item>

使用基于本机的语言，使用输入而不是textInput。

否则，只需使用带有flexDirection：'row'的视图

TextInput右侧的React-Native图标

2 个答案: