如何在ReactNative中将货币图标放在TextInput的值前面？

Question

当用户输入金额时，我需要将货币图标放在值的前面，但这并不容易。我花了一整天，但仍然找不到理想的解决方案。我最好的方法是将子组件包装到TextInput中，如下所示：

          <TextInput
            style={[SS.input, styles.input, props.styleInput, iErrored, iFocused, iDisabled]}
            placeholder={props.placeholder}
            underlineColorAndroid='transparent' editable={!props.disabled}
            keyboardType={keyboardType} autoCapitalize='none'
            autoCorrect={false} selection={state.position}
            value={state.value} onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            autoFocus={autoFocus}>
            {!!this.props.icon && !!state.value && (
              <Text style={{marginLeft: 10}}>{this.props.icon}</Text>
            )}
          </TextInput>

但是此决定有几个缺点。第一个不可能设置子组件的样式，我不能从数量上设置左填充。第二个是紧随图标之后的TextInput的焦点。有人可以帮我吗。

Answer 1

我相信您正在寻找的是CSS ::after伪元素。这是一个使用contenteditable span的示例：

#money {
  border: 1px solid black;
  padding: 2px 4px;
}

#money::after {
  content: " €";
}

<span id="money" contenteditable="true"></span>