javascript – 将参数传递给React Native中的组件

我试图使用我在React-Native中制作的通用导航组件.在呼叫点我想设置导航栏色调,标题等.

导航条码：

var NavigationBar = React.createClass({
    render: function(title,titleColor,NavBarColor) {
        var titleConfig = {
            title: title,tintColor: titleColor,};

        return (
            <NavBar
                title={titleConfig}
                tintColor={NavBarColor}
                leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
                rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
});

将其应用于另一页面：

<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>

如何正确地做到这一点？提前致谢.

解决方法

首先,渲染没有任何参数,你想做的是引用你传入的道具.

render: function () {
  var titleConfig = {
      title: this.props.title,tintColor: this.props.titleColor
  };  
  // Rest of code
}

只要这样做,每当您的NavigationBar都会重新投放NavBar组件.

一个超级简单的例子证明了这一点

var NavBar = React.createClass({
  render: function () {
    return <div id="navbar" style={{backgroundColor: this.props.tintColor}}>
    <h1 style={{color: this.props.title.tintColor}}>{this.props.title.title}</h1>
    </div>;
  }
});

var NavigationBar = React.createClass({
    render: function() {
        var titleConfig = {
            title: this.props.title,tintColor: this.props.titleColor,};

        return (
            <NavBar
                title={titleConfig}
                tintColor={this.props.NavBarColor}
                />
        );
    }
});


React.render(<NavigationBar title="Categories" titleColor="#ff0" NavBarColor="#f0b210" />,document.body);