向导入的组件添加样式

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包含在组件中，但是由于已经在HelloWorld.js中将style属性设置为，因此无法完成此操作。

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

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

Answer 1

如果希望Text的style属性的值是HelloWorld内部的本地styles和传递给HelloWorld的style属性的值的组合，则可以执行此操作。

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

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

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>
    );
  }
}