Question

我正在尝试使用我在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}>&#xf0c9;</Button>}
                rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
});

将其应用于其他页面：

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

如何正确地做到这一点？提前谢谢。

Answer 1

首先关闭render不会带任何参数，你想要做的是引用你传入的道具。

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

Answer 2

您可以调用导航栏组件并提供类似这样的道具

<NavigationBar title="Hello World" tintColor= "blue" />

在NavigationBar的声明中你可以像这样使用它

class NavigationBar extends React.Component{
    constructor(props){
     super(props);
        this.state={
           NavTitle:"",
          NavColor:""

         };
      }
    componentDidMount(){
        this.setState({
            NavTitle: this.props.title,
            NavColor:this.props.tintColor
        });
    }
  componentWillRecieveProps(nextProps,nextState){
    this.setState({
     NavTitle:nextProps["title"],
      NavColor:nextProps["tintColor"]
     });

    }
    shouldComponentUpdate(nextProps,nextState){
       // your condition if you want to re-render every time on props change
     return true;
    }
    render() {
        return (
            <NavBar
            title=this.state.NavTitle
            tintColor=this.state.NavColor
            leftButton={<Button style={styles.menuButton}>&#xf0c9;</Button>}
            rightButton={<Button style={styles.menuButton}>&#xf07a;</Button>} />
        );
    }
};

随着颜色和标题的更改，setState将强制组件使用更新的组件重新呈现组件。因此，它的单向绑定为您提供了双向绑定的风格。

Answer 3

render 是一个非参数化函数，意味着它不带任何参数。因此，要在React Native中将参数/值从一个组件传递到另一个组件，我们使用 props 。 props 是一个JavaScript对象，具有从一个组件传递给其他组件的属性。因此，您需要使用 props 传递值。

将参数传递给React Native中的组件

3 个答案: