Question

我有一个反应原生的观点，有这篇文章：

<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包装在视图中，然后在视图中添加边框，在您的情况下，您不希望文本输入为全宽我只需在左侧和右侧添加边距。

将TextInput包含在视图中：

<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>

这些观点的样式：

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

React-Native视图中的TextInput边框和宽度

1 个答案: