添加样式是进口零部件

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

您需要将样式作为道具传递给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> 
    ); 
    } 
} 

Answer 2

如果你想的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对象文字中，则它将覆盖本地对象文字中的一个。