React Native中是否有一种方法可以为TextInput设置字母间距？

Question

我一直试图给<TextInput>添加字间距样式，但似乎只适用于<Text>。在React Native中是否有一种方法可以增加<TextInput>中字符之间的间距？

这会增加字符之间的空格。

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

这不会起作用

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

- Frank Tian

---

请添加一些你尝试过的代码。 - Mitchel Jager

不，我不相信有字符填充类型属性；但是，您可以编写一个短函数，在需要时调用onChangeText来添加额外的空格。 - m_callens

字母间距在模拟器中无法显示，请在设备上检查您的应用程序。它会正常工作的。 - Aras

Answer 1

我认为这是一种hack，但它确实有效：

<TextInput letterSpacing={5} ... />

我在Stack Overflow上提问，为什么样式键也可以作为组件上的属性使用，但没有得到答案。
请注意，这不是在RN中设置组件样式的预期方法，因此不要将此解决方案视为永久性解决方案。

- cristian

Answer 2

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

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>
    );
  }
}

- Pablo Darde

---

他说要用React Native，而你提供的是适用于Web的React。 - user1971598

解决方案会改变数值，从而影响功能... - Franz

Answer 3

您应该在inputStyle属性中设置letterSpacing。

示例：

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

- Mukhammad Ali

Answer 4

快来看看这个组件吧 https://github.com/wix/react-native-ui-lib#masked-input 它允许您以任何想要的方式呈现自定义掩码输入，而不会影响输入的实际值。

- Ethan Sharabi

Answer 5

只需将文本放入textInput中，并像下面一样进行样式设置

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

- Mustafa