反应原生引脚输入无法在空间单元之间移除

Question

我正在使用 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,
    }}
  />

让我知道如何减少空间。

Answer 1

将样式属性"justifyContent"更改为：

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

这将减少引脚之间的空间。让我知道这是否适合您！