我试图使用我在React-Native中制作的通用导航组件.在呼叫点我想设置导航栏色调,标题等.
导航条码：
@H_301_4@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}></Button>} rightButton={<Button style={styles.menuButton}></Button>} /> ); } });将其应用于另一页面：
@H_301_4@<NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>如何正确地做到这一点？提前致谢.
解决方法
首先,渲染没有任何参数,你想做的是引用你传入的道具.
@H_301_4@render: function () {
var titleConfig = {
title: this.props.title,tintColor: this.props.titleColor
};
// Rest of code
}
只要这样做,每当您的NavigationBar都会重新投放NavBar组件.
一个超级简单的例子证明了这一点
@H_301_4@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);