我试图使用我在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);
原文地址:https://www.jb51.cc/js/152038.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。