我试图使用我在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}></Button>}
rightButton={<Button style={styles.menuButton}></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);
