如何在文本输入中设置图标？

Question

我正在尝试在文本输入中设置一个图标。 我知道，there is this answer。

但由于图标位于TextInput 之外，因此无法按预期工作，我需要它在里面。

这是我目前得到的：

这是我的代码：

         <View style={styles.InputContainer}>
            <Ionicons
              style={styles.IconWithinInput}
              name="ios-search"
              size={24}
            />
            <TextInput
              style={styles.AddEditInputs}
              onChangeText={text => this.setState({ text })}
              value={this.state.text}
            />
          </View>

还有样式：

  AddEditInputs: {
    flex: 1,
    height: 40,
    borderWidth: 1,
  },

  IconWithinInput: {
    padding: 10,
  },

  InputContainer: {
    flexDirection: 'row',
  },

我将输入边框设置为矩形，以便更好地向您展示我的意思。

最后的设计是这样的：

如您所见，输入边框也在图标的底部。

我还需要什么来实现我的需要？

Answer 1

您不能直接将icon 放在textInput 上。您可以做的是将icon 和textInput 与flexDirection 设置为row 的视图一起包装，并将left padding 提供给icon，使其看起来像textInput。如果你想这样做，你可以使用这样的东西

 <View
    style={{
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
     }}>
    <View style={{ flexDirection: 'row' }}>
      <View style={{justifyContent: "center", marginRight: 5 }}>
        <Image
          source={{
             uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png',
              }}
              style={{ width: 10, height: 10 }}
            />
          </View>

          <TextInput placeholder="Enter your name" />
        </View>
      </View>

但我的建议是使用react-native-elements 的Input component，因为它有leftIcon 作为props。您可以在here找到更多信息

Answer 2

<View style={{flex: 1, flexDirection: 'row'}}>
    <Image
        source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
        style={{borderWidth: 1,width: 40, height: 40}}
        />
    <TextInput
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
        style={{borderWidth: 1, height: 40, borderColor: 'grey'}}
        />
         <View>

1. 用 flex 包裹组件并为图标提供宽度。您可以通过一些包装来设置图标，因为它不能包含在文本框中。