Question

我有一个非常简单的组件，名为Divider，这里是源代码：

import React from "react";
import { StyleSheet, View } from "react-native";

export default class Divider extends React.Component {
  render() {
    return (
      <View style = { styles.separator } />
    );
  }
}

const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    marginBottom: 8,
    backgroundColor: "#FFFFFF80",
  },
});

我想要实现的是styles.separator中的值成为此组件的默认值，因为这些是我在大多数情况下使用的值，但在某些边缘情况下我需要更改例如marginBottom到16。

所以大多数情况下我只想做<Divider />，但有时候<Divider marginBottom = 16 />

我目前的情况如下所示，但显然这不起作用。

import React from "react";
import { StyleSheet, View } from "react-native";

export default class Divider extends React.Component {
  static defaultPropts = {
    marginTop: 0,
    marginBottom: 8,
    backgroundColor: "#FFFFFF80",
  }

  render() {
    return (
      <View style = {{
        height: StyleSheet.hairlineWidth,
        marginTop: {this.props.marginTop},
        marginBottom: {this.props.marginBottom},
        backgroundColor: {this.props.backgroundColor},
      }} />
    );
  }
}

Answer 1

您可以通过道具接收自定义样式，并在组件样式中将它们用作数组。当你在组件之后调用props样式时，它将覆盖它已经拥有的任何相同的样式属性。

例如，假设您有一个名为“Card”的组件，您可以像这样编写组件：

<View style={[style.cardStyle, props.style]}>
  {props.children}
</View>

并将其称为<Card style={{ backgroundColor: '#FFFFFF'}} />

所以它从它自己的组件中获取所有定义的'cardStyle'，同时添加了props收到的样式。

希望它有所帮助。

编辑：

您可以尝试这样的事情

import React from "react";
import { StyleSheet, View } from "react-native";

const Divider = (props) => {
      <View style = {{
        height: StyleSheet.hairlineWidth,
        marginTop: {this.props.marginTop},
        marginBottom: {this.props.marginBottom},
        backgroundColor: {this.props.backgroundColor},
      }} />
}

Divider.defaultProps = {
    marginTop: 0,
    marginBottom: 8,
    backgroundColor: "#FFFFFF80",
  }

export default Divider;

让我知道它是否适合你。

Answer 2

你可以这样做

export default class Divider extends React.Component {
 render() {
 return (
  <View style = {{
    height: StyleSheet.hairlineWidth,
    marginTop: {this.props.marginTop},
    marginBottom: {this.props.marginBottom},
    backgroundColor: {this.props.backgroundColor},
   }} />
  );
 }
}

Divider.defaultProps = {
  marginTop: 0,
  marginBottom: 8,
  backgroundColor: "#FFFFFF80",
}

Answer 3

所以经过研究，我发现这很有效。

import React from "react";
import { Dimensions, StyleSheet, View } from "react-native";

export default class Divider extends React.Component {
  static defaultProps = {
    customWidth: Dimensions.get("window").width / 2.0,
  }

  render() {
    const halfWidth = this.props.customWidth 

    return (
      <View style = { [styles.separator, {width: halfWidth}] } />
    );
  }
}

const styles = StyleSheet.create({
  separator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: "#FFFFFF80",
  },
});

所以现在每当我使用<Divider />时，它的宽度将是屏幕大小的一半，但如果我点头<Divider customWidth = { 10 }，那么它将覆盖默认值，而不是10 dp。

如何在React Native中将默认道具值设置为自定义状态较少的组件

3 个答案: