-
关闭ios模拟器中恼人的警告弹窗
在 index.js 中加入一行代码
console.disableYellowBox = true;
-
在Chrome中查看网络请求
在index.js(ts)中加入以下代码（chrome需要进行跨域设置）
if (__DEV__) { GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest }
-
vs code设置支持Tab键代码补全设置项
"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": { "javascript": "javascriptreact" }
可补全标签
- react native中如果配置了
.env,在其中添加配置项时reloadjs是取不到值的，需要重新执行react-native run-ios或者react-native run-android来重启服务 -
react-navigation 返回并传递参数的方法
navigate('Detail', {
// 跳转的时候携带一个参数去下个页面
callback: (data) => {
console.log(data); // 打印值为：'回调参数'
}
});
const {navigate,goBack,state} = this.props.navigation;
// 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
state.params.callback('回调参数');
goBack();
-
async 函数的断点调试方法
-
第一种 在需要打断点的地方debugger
debugger
-
第二种 利用vscode的调试功能
vscode
-
创建无状态组件（Stateless Functional Component）
当组件本身只是用来展示，所有数据都是通过props传入的时候，我们便可以使用Stateless Functional Component来快速创建组件。例如下面代码所示:
import React from 'react';
const Button = ({
day,
increment //传入的函数
}) => {
return (
<div>
<button onClick={increment}>Today is {day}</button>
</div>
)
}
Button.propTypes = {
day: PropTypes.string.isRequired,
increment: PropTypes.func.isRequired,
}
这种组件，没有自身的状态，相同的props输入，必然会获得完全相同的组件展示。因为不需要关心组件的一些生命周期函数和渲染的钩子，所以不用继承自Component显得更简洁。
-
组件的条件渲染注意点
根据条件来确定是否渲染React元素时，只有变量为true时才会渲染。例如：
<div>
{showHeader && <Header />}
<Content />
</div>
上面的JSX只会在showHeader为true时渲染<Header />组件。
值得注意的是，JavaScript 中的一些 “falsy” 值(比如数字0)，它们依然会被渲染。例如，下面的代码不会像你预期的那样运行，因为当 props.message 为空数组时，它会打印0:
<div>
{props.messages.length &&
<MessageList messages={props.messages} />
}
</div>
要解决这个问题，请确保 && 前面的表达式始终为布尔值：
<div>
{props.messages.length > 0 &&
<MessageList messages={props.messages} />
}
</div>
相反，如果你想让类似 false、true、null 或 undefined 出现在输出中，你必须先把它转换成字符串 :
<div>
My JavaScript variable is {String(myVariable)}.
</div>
网友评论