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>

但是我的建议是使用Input component中的react-native-elements，因为它具有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>

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

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

2 个答案: