带有React Native的TextInput显示单行

我试图实现两个文本输入。我不确定最佳实践是否将这些内容包装在滚动视图中。但是，当我如下所示做时，我只在中间看到一条线。带有React Native的TextInput显示单行

如果我删除滚动视图，只留下一个文本输入，它会显示一个包含我可以与之交互的输入框。尽管我仍然无法让键盘在模拟器上显示。但我可以手动输入和更改状态。

关于如何允许多个文本输入以及如何显示从底部弹出的本机键盘的任何想法？

render() { 
    return (
     <ScrollView> 
     <TextInput 
     style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
     placeholder="Enter item 1" 
     value={this.state.text} 
     onChangeText={this.onChange} /> 
     <TextInput 
      style={{height: 40, borderColor: 'gray', borderWidth: 1}} 
      placeholder="Enter item 2" 
      value={this.state.text} 
      onChangeText={this.onChange} /> 
     </ScrollView> 
    ); 
    }

来源

2016-04-03 jro

你在iOS？应该有一个选项可以在硬件键盘（PC）和屏幕上显示的硬件键盘之间切换。我认为它是iOS模拟器上的⌘K。您可以在顶部菜单中找到它，否则iOS模拟器 - >硬件 - >连接硬件键盘应该取消选中屏幕键盘显示。 – whitep4nther

关于你的显示问题，我不能在iOS上试用它 - 没有我附近的Mac，但在Android似乎工作得很好。尝试添加样式到ScrollView的属性'contentContainerStyle'上？也许使用flex或设置高度将解决问题（https://facebook.github.io/react-native/docs/scrollview.html#content）。无论如何，请尝试使用检查器来检查屏幕上的元素（菜单 - >检查器）。 – whitep4nther

1 - 对于iOS模拟器，有一个选项硬件 - >键盘 - >切换软键盘（默认未选中）。选中此选项应该可以解决显示本地键盘的问题。

2 - 关于多行文字输入。是的，这是一个问题，但在下面的答案中有一个共享的工作。我将附上链接以供参考。 P.s：我自己没有尝试过，但答案已标记为解决了问题！

Multi-Line TextInput Hack - https://stackoverflow.com/a/31759113/5783646

来源

2016-04-04 06:56:28

显示键盘在iPhone模拟器：硬件 - >键盘 - >切换软件键盘
显示多个文字输入：我的猜测是，有应用的样式（或不应用）到父元素或其他地方阻止TextInput以可用大小呈现。

我创建了RN游乐场的例子演示你的要求为：https://rnplay.org/apps/ldlfWw

来源

2016-04-07 23:04:42

带有React Native的TextInput显示单行

回答

相关问题