Question

如何扩展ScrollView，以便可以将MyScrollView与默认属性一起使用？

我想替换

<ScrollView
     style={{ flex: 1 }}
     showsVerticalScrollIndicator={false}
     bounces={false}
     contentContainerStyle={{
                        paddingTop: 50,
                        paddingRight: 33,
                        paddingBottom: 60,
                        paddingLeft: 33
                    }}
>
...
</ScrollView>

仅需使用我自己的组件

<MyScrollView>
...
</MyScrollView>

我构建了自己的组件，但它们不包含Views那样的其他组件。

Answer 1

您可以将MyScrollView包裹在ScrollView上，如下所示：

class MyScrollView extends Component {
  render() {
     return (
      <ScrollView
        style={{ flex: 1 }}
        showsVerticalScrollIndicator={false}
        bounces={false}
        contentContainerStyle={{
          paddingTop: 50,
          paddingRight: 33,
          paddingBottom: 60,
          paddingLeft: 33,
        }}
        {...this.props}
      />
  }
};

或作为功能组件（如果您不需要状态或生命周期方法）：

const MyScrollView = props => {
  return (
    <ScrollView
      style={{ flex: 1 }}
      showsVerticalScrollIndicator={false}
      bounces={false}
      contentContainerStyle={{
        paddingTop: 50,
        paddingRight: 33,
        paddingBottom: 60,
        paddingLeft: 33,
      }}
      {...props}
    />
  );
};

通过这种方式，MyScrollView的实例使用您的默认道具，并具有覆盖它们的能力：

<MyScrollView showsVerticalScrollIndicator={true}>
  <View />
</MyScrollView>

任何子组件都与道具一起传递给包装好的ScrollView。

Answer 2

只需将子组件传递到其中，就像：

<MyScrollView>
   <Text>Hello</Text>
</MyScrollView>

，然后在MyScrollView组件中使用children道具获取视图；

<ScrollView
 style={{ flex: 1 }}
 showsVerticalScrollIndicator={false}
 bounces={false}
 contentContainerStyle={{
    paddingTop: 50,
    paddingRight: 33,
    paddingBottom: 60,
    paddingLeft: 33
 }}>
   {this.props.children}
</ScrollView>

如何将ScrollView扩展到React Native中的默认属性？

2 个答案: