React-native-pin-input无法在空间单元之间移除

时间:2018-01-19 12:35:28

标签: reactjs react-native textinput

我使用react-native-pin输入来获取输入。引脚标签之间的间距非常大。我无法增加或减少它。

  <PinInput
    style={{justifyContent: 'center', alignSelf: 'stretch'}}
    ref={(input) => {
        this.pin = input;
    }}
    text=""
    pinLength={4}
    pinItemStyle={{width: 50, height: 50, borderTopWidth: 0, borderLeftWidth: 0, borderRightWidth: 0, borderBottomWidth: 2, borderColor: 'green'}}
    pinItemProps={{keyboardType: 'number-pad', returnKeyType: 'done', secureTextEntry: false}}
    placeholder={'_'}
    onPinCompleted={(pin) => {
        this.setState({pin: pin});
        Keyboard.dismiss();
    }}
    onPinKeyPress={(e, i) => {
        let message = `i:${i},key:${e.nativeEvent.key}`;
        console.log(message)
        this.setState({log: this.state.log + message})
    }}
    containerStyle={{backgroundColor: 'transparent'}}
    containerPinStyle={{
        flexDirection: 'row',
        justifyContent: 'space-around',
        alignItems: 'center',
        marginTop: 20,
    }}
  />

让我知道如何减少空间。

1 个答案:

答案 0 :(得分:0)

更改你的风格属性&#34; justifyContent&#34;对此:

style={{justifyContent: 'space-between', alignSelf: 'stretch'}}

这将减少引脚之间的空间。如果这对您有用,请告诉我!