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

【问题标题】：Is there a way to do letterSpacing for TextInput in React Native?有没有办法在 React Native 中为 TextInput 做 letterSpacing？
【发布时间】：2016-10-30 22:57:57
【问题描述】：

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

这增加了字符之间的间距

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

这行不通

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

【问题讨论】：

添加一些代码以显示您尝试过的内容。
不，我不相信有字符填充类型属性；但是，您可以编写一个名为 onChangeText 的短函数，它可以在必要时添加额外的空格
letterSpacing 不显示在模拟器中，请在设备中检查您的应用。它会工作的。

标签： react-native

【解决方案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>
    );
  }
}

【讨论】：

他说 react native 而你给 react for web
解决方案改变了价值，从而改变了功能......

【解决方案2】：

您应该在 inputStyle 属性中提供 letterSpacing。

例子：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需将文本放入 textInput 并设置如下样式

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

【讨论】：

【解决方案5】：

我认为这是一个 hack - 不过，它确实有效：

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

我有asked here 所以为什么样式键也可以作为组件的道具，仍然没有答案。
不要认为这个解决方案是永久性的，这显然不是在 RN 中设置组件样式的预期方式。

【讨论】：