React Native页面props传Boolean值时遇到的问题

短命女 2022-01-10 07:13 248阅读 0赞

> 本文写的`props`传值为跨页面传props，组件嵌套时不会存在这个bug，原因是在没有使用react-router之类的相关组件，而是直接使用原始url跳转的时候会将参数转为字符串

在RN中自建**页面组件**（必须是完整页面跳转，例如跳到日历选择页面之类的）时会用到需要传入一个`bool`值，当希望实现没有传对应的`props`值时给一个默认值，例如

*MyComponentPage.js*

class MyComponentPage extends React.component { 
    	constructor(props) { 
    	    super(props);
    	    this.isHandsome = props.isHandsome ? true : false;//通过这行代码实现不传时为false
    	    //this.isHandsome = props.isHandsome || false // 也可以用这种方式
    	    .... 
    	}
    	....
    }

*index.js*

//使用路由跳转到
    <MyComponentPage isHandsome={ true}/>

可能初看起来代码没什么问题，但坑就在这里了，在ios设备上这几行代码没有问题，但如果在安卓上，就会遇到一个隐藏的Bug，如果在使用组件时，传了`isHandsome={ false }`时，会意外的发现到**最后组件得到的`this.isHandsome`的值为`true`???**

请教大佬后知道，在安卓里，`bool`值传参是用的`String`类型！而在js里只要不为空的字符串再判断时都是`true`！所以这就能解释为什么最后组件得到的`this.isHandsome`的值为`true`了，所以在封装的时候应该添加额外的判断：

*MyComponentPage.js*

class MyComponentPage extends React.component { 
    	constructor(props) { 
    	    super(props);
    		this.isHandsome = props.isHandsome || false;
    		if (typeof this.isHandsome === "string") { 
    			this.isHandsome = this.isHandsome == "true" ? true : false;
    		}
    	    .... 
    	}
    	....
    }