Guest User

Untitled

a guest
Jan 24th, 2018
66
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.15 KB | None | 0 0
  1. var NavigationBar = React.createClass({
  2. render: function(title, titleColor, NavBarColor) {
  3. var titleConfig = {
  4. title: title,
  5. tintColor: titleColor,
  6. };
  7.  
  8. return (
  9. <NavBar
  10. title={titleConfig}
  11. tintColor={NavBarColor}
  12. leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
  13. rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
  14. );
  15. }
  16. });
  17.  
  18. <NavigationBar title="Categories" titleColor="#ffffff" NavBarColor="#f0b210"/>
  19.  
  20. render: function () {
  21. var titleConfig = {
  22. title: this.props.title,
  23. tintColor: this.props.titleColor
  24. };
  25. // Rest of code
  26. }
  27.  
  28. var NavBar = React.createClass({
  29. render: function () {
  30. return <div id="navbar" style={{backgroundColor: this.props.tintColor}}>
  31. <h1 style={{color: this.props.title.tintColor}}>{this.props.title.title}</h1>
  32. </div>;
  33. }
  34. });
  35.  
  36. var NavigationBar = React.createClass({
  37. render: function() {
  38. var titleConfig = {
  39. title: this.props.title,
  40. tintColor: this.props.titleColor,
  41. };
  42.  
  43. return (
  44. <NavBar
  45. title={titleConfig}
  46. tintColor={this.props.NavBarColor}
  47. />
  48. );
  49. }
  50. });
  51.  
  52.  
  53. React.render(<NavigationBar title="Categories" titleColor="#ff0" NavBarColor="#f0b210" />, document.body);
  54.  
  55. <NavigationBar title="Hello World" tintColor= "blue" />
  56.  
  57. class NavigationBar extends React.Component{
  58. constructor(props){
  59. super(props)
  60. }
  61. componentDidMount(){
  62. this.setState({
  63. NavTitle: this.props.title,
  64. NavColor:this.props.tintColor
  65. });
  66. }
  67. componentWillRecieveProps(nextProps,nextState){
  68. this.setState({
  69. NavTitle:nextProps["title"],
  70. NavColor:nextProps["tintColor"]
  71. });
  72.  
  73. }
  74. render() {
  75. return (
  76. <NavBar
  77. title=this.state.NavTitle
  78. tintColor=this.state.NavColor
  79. leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
  80. rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
  81. );
  82. }
  83. };
Add Comment
Please, Sign In to add comment