的TextInput邊界和寬度的陣營天然視圖內

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折）。我該如何解決？

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