Question

我有以下组件：

HelloWorld.js

class HelloWorld extends Component {
  render() {
    return (
      <Text style={styles.text}>Hello World!</Text>
    );
  }
}

我将其导入另一个文件中，如下所示：

SignIn.js

class SignIn extends Component {
  render() {
    return (
      <HelloWorld style={styles.signInText} />
    );
  }
}

正如您在 SignIn.js 中看到的那样，我希望将styles.signInText包含在组件中，但是由于我已将style属性设置为，因此无法执行此操作HelloWorld.js

我知道我可以将这些样式导入 SignIn.js 并让它像这样：<HelloWorld style={[styles.text, styles.signInText]} />然而这是一个混乱的解决方案。

如何在 HelloWorld 组件中允许使用其他样式？感谢。

Answer 1

如果您希望style Text属性的值是styles内的HelloWorld和传递给style的值的组合HelloWorld的属性，你可以这样做。

class HelloWorld extends Component {
  render() {
    return (
      <Text style={{...styles, ...this.props.style}}>Hello World!</Text>
    );
  }
}

这会将本地styles变量解构为新对象，同时将style HelloWorld属性解构为同一对象。最终结果将传递到style的{{1}}属性。请记住，如果传递给Text的{{1}}属性具有本地style对象文字中也存在的属性键，它将覆盖本地HelloWorld中的属性键。 object literal。

Answer 2

您需要将样式作为道具传递给HelloWorld组件。

<强> SignIn.js

class SignIn extends Component {
  render() {
    return (
      <HelloWorld signInText={styles.signInText} />
    );
  }
}

<强> HelloWorld.js

class HelloWorld extends Component {
  render() {
    const { signInText } = this.props;
    return (
      <Text style={[styles.text, signInText]}>Hello World!</Text>
    );
  }
}

向导入的组件添加样式

2 个答案: