我们如何扩展一个React Native“form”组件，这个组件需要用户输入？

我可以找到一些关于如何基于现有组件制作自己的可重用React Native组件的文档，教程或示例。我们如何扩展一个React Native“form”组件，这个组件需要用户输入？

在我能找到的那些中，似乎没有一个扩展组件，例如Picker，用于“返回”来自用户的输入。

即使查看Native Base的Picker的源代码也不是直截了当的。例如，它似乎在两个不同的地方定义了Picker的Item。一些看起来像胶水或样板文件的东西我也不明白，尽管它只有几行。

如何扩展“输入”组件，或者我可以遵循哪个示例？

来源

2017-09-03 hippietrail

由于React Native只是React的一个渲染目标，因此很多基本文档都存在于React core library docs中。如果您刚刚开始使用React Native，并且没有在网络上使用React，那么这些文档是一个很好的开始。

具体见：Composition vs Inheritance。

同样，当谷歌搜索如何使用React Native做某些事情时，并不是特定于本机渲染目标，您通常更喜欢使用Google的“反应”功能。

要回答你的问题，在反应，延长组件的典型方法是将它们包装在另一个组件：

const EmailInput = props => { 
    return (
    <TextInput 
     keyboardType="email-address" 
     autoCorrect={false} 
     autoCapitalize="none" 
     {...props} 
    /> 
) 
}

然后，您可以使用该组件就像你做的TextInput，如

<EmailInput value={this.state.value} />

作为一个旁注，我也发现在NativeBase中扩展组件非常困难，但这些问题与在NativeBase库中做出的一些设计决定相关，而不是通用于React。

来源

2017-09-03 14:14:33 jevakallio

所以我想我会看到你将一个初始的'value'从EmailInput传递给Input。如何获取用户输入的字符串？我希望找到的另一个好例子是派生组件可以拥有自己的属性和基本组件属性以及调用代码如何使用这些属性。您是对的我第一次通过React Native使用React，自从发布此问题后，我开始直接使用React文档。实际上，我在离开软件开发几年后，立即赶上了一堆新概念。 – hippietrail

该值不仅仅是一个初始值 - 它是值绑定，请参阅受控组件：https://facebook.github.io/react/docs/forms.html#controlled-components - 并通过传递值回来了，你会使用回调道具。但我相信这些都在文档中。祝你好运！ :) – jevakallio

我们如何扩展一个React Native“form”组件，这个组件需要用户输入？

回答

相关问题