Question

26

Passing Parameters to Components in React Native

rated 0 times [ 29] [ 3] / answers: 1 / hits: 76275 / 9 Years ago, tue, december 1, 2015, 12:00:00

I'm trying to use a common Navigation Component I made in React-Native. At the point of calling I want to set the Navigation Bar Tint, Title etc.

Nav Bar Code:

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>} />

        );

    }

});

Applying it on another page:

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

How to do this properly? Thanks in advance.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

arron

Add To Favorites

Follow

Total Points: 663

Total Questions: 119

Total Answers: 112

Location: Belize

Member since Mon, Jun 20, 2022

2 Years ago

answered 9 Years ago trayvon · Accepted Answer

First off render does not take any parameters, what you want to do is to reference your props that you passed in.

render: function () {

  var titleConfig = {

      title: this.props.title,

      tintColor: this.props.titleColor

  };  

  // Rest of code

}

Just by doing this, whenever your NavigationBar rerenders so will the NavBar component too.

A super simple example demonstrating this

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);