Question

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

          <TextInput
            style={SS.input}
            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跨度的示例：

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

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

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

Answer 2

我找到了最好的解决方案，您需要这样做，设置TextInput的样式，使其不可见。要显示输入，请在顶部添加具有相同参数的Text组件，以使其准确显示在本机组件的顶部。就像面具一样。

<View style={container}>
 <TextInput
            style={[SS.input, styles.input]}
            placeholder={props.placeholder}
            value={state.value} onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            // make invisible text
            color={'rgba(0,0,0,0)'} 
            autoFocus={autoFocus} />
          // render currency symbol with value that depends on the props
          {!!props.maskedTextColor !! && props.currencySymbol && !!state.value && (
            <Text
              color={props.maskedTextColor}
              textStyle={'menuSliders'}
              style={styles.maskedText}>
              {`${state.value} ${props.currencySymbol}`}
            </Text>
          )}
<View/>

您需要将Text组件与组件完全相同，并放置样式，在我的情况下是：

    maskedText: {
      position: 'absolute',
      left: 15,
    },

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

2 个答案: