javascript - 设置下划线长度

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