2017-12-18 116 views
0

我試圖設計一個反應原生頁面,在那裏我試圖建立一個文本在左邊的窗體和相應的文本輸入字段在右邊screen.Like下面的例子enter image description here顯示反應原生文本輸入字段之前的文本

這是我試圖寫它,但它不顯示文本輸入字段。

<Text > 
 
      Email: <TextInput placeholder="Enter email" underlineColorAndroid='transparent' style={styles.TextInputStyleClass}/> 
 
      </Text>

我已經實現,在react.js,因爲我很熟悉的造型的網頁。但是我在反應本土方面相當新,並且無法弄清楚如何做到這一點。我已經閱讀了react-native-material-textfield的文檔,但它並沒有真正提供我需要的東西。任何幫助將不勝感激。

回答

0

你可以嘗試這樣的事情。

<View style={styles.row}> 
    <Text> 
    Email: 
    </Text> 
    <TextInput 
    placeholder="Enter email" 
    underlineColorAndroid='transparent' 
    style={styles.TextInputStyleClass} 
    /> 
</View> 

而在行中,您可以使用樣式表flexDirection: 'row'。可能需要一些其他的調整。

+0

這只是顯示文本下方的文本輸入框,而不是在其右側。 – JSnow

+0

您是否嘗試在視圖上放置樣式flexDirection:'row'?如果你這樣做是組件大小的問題,你需要減小TextInput的大小。 –

+0

是的,我做到了。我想我需要對我的文本輸入樣式進行一些更改。 – JSnow

1

試試這個我添加了內嵌樣式。

<View style={{flexDirection:"row",alignItems:'center'}}> 
 
     <Text>Name:</Text> 
 
     <TextInput 
 
     underlineColorAndroid='transparent' 
 
     style={{borderColor: 'gray', borderWidth: 1}} 
 
     value="placeholder" 
 
     /> 
 
     </View>

相關問題