设置下划线长度

Question

我要设置下划线的长度，您知道我该怎么办？

下划线的长度取决于单词的长度，我将设置此尺寸。

View style={consumer.body}>
          <View style={consumer.bodyInputs}>
            <TextInput
              style={consumer.inputs}
              placeholder="Codice Fiscale"
              keyboardType="default"
              underlineColorAndroid="grey"
              onChangeText={value => {
                //code... 
              }
              }
            />
          </View>

这是关于样式

body: {
        alignItems: "center",
        marginTop: 10,
        marginBottom: 10
    },
    bodyInputs:{
        marginTop: 10
    },
    inputs: {
        height: 45,

      },

Answer 1

一种简单的方法是使用空的<View />。请参见下面的示例：

   <View style={styles.body}>
      <View style={styles.bodyInputs}>
        <TextInput
          style={styles.inputs}
          placeholder="Codice Fiscale"
          keyboardType="default"
          underlineColorAndroid="grey"
        />
        // here we create your bottom border 
        <View style={{width: 80, height: 1, backgroundColor: '#000'}}/>
      </View>
    </View>

输出：

工作小吃：

https://snack.expo.io/Byyvw593r