Question

我发现很少有关于如何根据现有组件制作自己的可重用React Native组件的文档，教程或示例。

在我能找到的内容中，似乎都没有扩展self.mapView.translatesAutoresizingMaskIntoConstraints = NO; CGFloat mapHeigthValue = self.view.frame.size.height/3; //setting the mapView heigth = 1/3 of view height this is an example NSArray * verticalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:[NSString stringWithFormat:@"V:[mapView(%f)]|",mapHeigthValue] options:0 metrics:nil views:@{@"mapView":self.mapView}]; NSArray * horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mapView]|" options:0 metrics:nil views:@{@"mapView":self.mapView}]; //Add constraints to the Parent [self.view addConstraints:verticalConstraints]; [self.view addConstraints:horizontalConstraints];之类的组件来“返回”来自用户的输入。

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

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

Answer 1

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

具体见：Composition vs Inheritance。

类似地，当使用React Native搜索如何使用不特定于本机渲染目标的内容时，您通常更好地使用Google搜索＆＃34;反应＆＃34;。

要回答你的问题，在React中，扩展组件的典型方法是将它们包装在另一个组件中：

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

然后就像使用TextInput一样使用此组件，例如

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

作为旁注，我发现扩展NativeBase中的组件很棘手，但这些问题与NativeBase库中的一些设计决策有关，而不是React的通用。

我们如何扩展React Native“form”组件，这是一种用户输入的类型？

1 个答案: