Czy istnieje sposób wykonywania funkcji letterSpacing dla funkcji TextInput w trybie React Native?

Question

Próbowałem dać <TextInput> styl letterSpacing, ale wydaje się, że działa tylko dla <Text>. Czy w React Native istnieje sposób na zwiększenie przestrzeni między znakami w TextInput?

To zwiększa przestrzeń między znakami

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

to nie będzie działać

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

Answer 1

Jest to możliwe rozwiązanie, może nie na lepsze.

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

Sprawdź ten składnik https://github.com/wix/react-native-ui-lib#masked-input To pozwala na renderowanie zwyczaj zamaskowane wejście w jakikolwiek sposób chcesz, bez wpływu na rzeczywistą wartość wejścia.