将图标放在占位符中 - React Native

Question

我使用的是npm react-native-autocomplete-input，我的问题是，如何将图标放入占位符，因为没有相关的文档。

我无法使用另一个npm自动完成功能，因为我已经编写了一些内容。

现在，我有这个：

自动完成的结构是：

<Autocomplete
    data={data}
    defaultValue={query}
    onChangeText={text => this.setState({ query: text })}

    placeholder="Here is my placeholder"

    renderItem={data => (
       <TouchableOpacity onPress={() => this.setState({ query: data })}>
          <Text>{data}</Text>
       </TouchableOpacity>
)} />

Answer 1

库使用默认的TextInput，因此没有定义的方法来添加占位符图像。如果查看和自动完成以进行布局，则必须使用组合。

<View style={styles.searchSection}>
    <Icon style={styles.searchIcon} name="ios-search" size={20} color="#000"/>
    <Autocomplete
    data={data}
    defaultValue={query}
    onChangeText={text => this.setState({ query: text })}

    placeholder="Here is my placeholder"

    renderItem={data => (
       <TouchableOpacity onPress={() => this.setState({ query: data })}>
          <Text>{data}</Text>
       </TouchableOpacity>
)} />
</View>

Answer 2

我遇到了同样的问题，但是我通过使用bottom，left和position:absolute自由移动图标来解决了这个问题。

<View style={styles.container}>

       <FontAwesome name="search" size={20} color="#21344B" 
        style={{position:"absolute",bottom:20,left:15,zIndex:15,}}
        />

       <Autocomplete
          //Your Normal props
        />

</View>