react-native - React-Native View 中的 TextInput 边框和宽度

Question

我有一个包含以下内容的 react native View :

<View style={styles.section}>
          <Text style={styles.h2}>
            NAME
          </Text>
          <TextInput style={styles.input} placeholder="Name" />
          <Text style={styles.h2}>
            EMAIL
          </Text>
          <TextInput style={styles.input} placeholder="Password" />
        </View>  

input: {
    height: 30,
    flex: 0.7,
    fontSize: 13,
    padding: 4,
    borderBottomColor: '#fff',
    borderRightColor: 'transparent',
    borderLeftColor: 'transparent',
    borderTopColor: 'transparent',
    borderTopWidth: 0,
    borderBottomWidth: 0.5,
  },

不幸的是，这没有显示边框(而不是所需的下划线边框)，并且两个输入框都占据了全屏(而不是我想要的 0.7 flex)。我该如何解决？

Answer 1

除非启用多行，否则您无法直接在 TextInput 上声明特定边框，您可以查看此 link .

我将 TextInput 包装在 View 中，然后向 View 添加边框，如果您不希望文本输入为全宽，我只需在左侧和右侧添加边距。

将 TextInput 包装在 View 内:

<View style={styles.section}>
           <Text style={styles.h2}>
             NAME
           </Text>
           <View style={styles.inputView}>
            <TextInput style={styles.input} placeholder="Name" />
           </View>
           <Text style={styles.h2}>
             EMAIL
           </Text>
           <View style={styles.inputView}>
              <TextInput style={styles.input} placeholder="Password" />
           </View>
</View>

这些 View 的样式:

input: {
  height: 40,
  fontSize: 13,
  padding: 4,
},
section:{
  marginLeft:10,
  marginRight:10,
},
inputView:{
  borderBottomColor: '#fff',
  borderBottomWidth: 0.5,
}