Question

这是反应性问题，但是类似的概念也可以用于反应。

我想在react-native中创建CustomView。我正在使用打字稿。

到目前为止，我有：

user

到目前为止还可以，因为仅使用了3个道具：width，height和marginTop。

但是，这是不可重用的，如果我需要添加更多道具，它会变得很冗长。

所以，问题是：如何让CustomView接收View可以接收的本机组件的任何道具？

我的猜测是我应该删除CustomViewProps。然后，我应该使道具继承自与本机组件View相同的类型。但是，我正在为此而苦苦挣扎。

Answer 1

自创建CustomViewProps以来，我假设您要在本机组件的已编写行为之上添加一些特定行为。

让我们创建一个示例。

我想创建一个具有某些特定行为的按钮，但是在其他情况下，我希望它的行为类似于普通的TouchableOpacity组件。例如，我想添加一个“正在加载”状态，该状态将在其中显示加载程序而不是其内容。因此逻辑是：创建您的自定义道具，并将自定义道具与本机的默认道具合并

import React, { FC, ReactElement } from 'react'
import { ActivityIndicator, TouchableOpacity, TouchableOpacityProps, StyleSheet } from 'react-native'

type MyProps = {
  loading?: boolean
  children: ReactElement
}

const MyButton: FC<MyProps & TouchableOpacityProps> = (props: MyProps & TouchableOpacityProps) => (
  <TouchableOpacity {...props} disabled={props.disabled || props.loading} style={[styles.button, props.style]}>
    {props.loading ? <ActivityIndicator /> : props.children}
  </TouchableOpacity>
)

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'yellow',
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10
  },
})

export default MyButton

loading道具将负责按钮的两个内容，或者是disabled道具。 TouchableOpacity组件将收到每个兼容的道具（由于您已分配TouchableOpacityProps，因此将启用自动建议）。 styles.button的行为类似于默认样式，但是如果您在style道具中指定了其他内容，则会被覆盖。就是这样！

创建通用自定义组件反应

1 个答案: