反应原生自定义样式文本输入

Question

我试图在自然文本输入中做出自定义样式。它的6个textInput，它们之间的边距很小，如图中所示

这是我的代码，（temText是我要创建的textInput的数量）

  const { container, pinInputStyle,pinInputStyle2 } = styles;
    const {styleUnder} = this.state;
    var indet = this.temText.map((i) => {
        return (
            <TextInput
                ref={ref => this.temText[i] = { myRef: ref, next: i + 1 }}
                type={'TextInput'}
                underlineColorAndroid={'transparent'}
                autoCapitalize={'none'}
                autoCorrect={false}
                onChangeText={(value) => this._onChangeText(value)}
                placeholder={this.props.placeholder}
                keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
                autoFocus={i === 0}
                maxLength={1}
                key={i}
                onFocus={()=>this._onFocus()}
                onBlur = {()=>this._onBlur()}
                placeholderTextColor ="#3e445f"
                //onEndEditing = { this.verifyCode.bind(this) }
                enablesReturnKeyAutomatically={false}
                style={[pinInputStyle]}
            />
        )
    });

风格

    export const styles = StyleSheet.create({
    container:{
        flexDirection:'column',
        flex:1,

    },
    textViewStyle:{
        flexDirection:'row',
    },
   pinInputStyle:{
       marginLeft:calcSize(10),
       fontSize:calcSize(50),
       width:calcSize(20),
       alignSelf: 'center'
   },
   pinInputStyle2:{
       fontSize:calcSize(150),
   },
   codeStyle:{
       flex:1,
       flexDirection:'row'
   }
})

现在它看起来像这样 但我需要更大的行\占位符和fontsize