2017-12-18 27 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>

相关问题