Question

我一直试图给<TextInput>一个letterSpacing样式，但它似乎只适用于<Text>。 React Native中有没有办法增加TextInput中字符之间的空间？

这会增加字符之间的空间

<Text style={{'letterSpacing': 5}}>Some Text</Text>

这不会起作用

<TextInput style={{'letterSpacing': 5}} />

Answer 1

这是一种可能的解决方案，也许不是更好。

Jsfiddle

class Form extends React.Component {
  constructor() {
    super();
    this.state = {
        value: '',
    };
    this.onChangeText = this.onChangeText.bind(this);
  }

  onChangeText(e) {
    const val = e.target.value.replace(/ /g, '').split('');
    const spaced = val.join(' ');
    this.setState({
        value: spaced,
    });
  }

  render() {
    return(
        <div style={{flexDirection: 'column'}}>
        <div>Type Text</div>
        <input
          type='text'
          onChange={this.onChangeText}
          value={this.state.value}
        />
      </div>
    );
  }
}

Answer 2

您应该在inputStyle属性中输入letterSpacing。

示例：

<TextInput inputStyle={{ letterSpacing: 20 }}/>

Answer 3

查看此组件 https://github.com/wix/react-native-ui-lib#masked-input 它允许您以任何方式呈现自定义屏蔽输入，而不会影响输入的实际值。

Answer 4

只需将文本放在textInput内，然后像下面一样设置样式

<TextInput 
  placeholder={'1  2      3     4     5     6'}
  style={textInputViewStyle}
  onChangeText={setCode}
  maxLength={6}
>
  <Text style={{ letterSpacing: 19 }}>{code}</Text>
</TextInput>

有没有办法在React Native中为TextInput做letterSpacing？

4 个答案: