RN小白笔记

1. 关闭ios模拟器中恼人的警告弹窗

在 index.js 中加入一行代码

console.disableYellowBox = true;

2. 在Chrome中查看网络请求

在index.js(ts)中加入如下代码（chrome须要进行跨域设置）

if (__DEV__) { GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest }

3. vs code设置支持Tab键代码补全设置项

"emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": { "javascript": "javascriptreact" }

可补全标签 4. react native中若是配置了.env,在其中添加配置项时reloadjs是取不到值的，须要从新执行react-native run-ios或者react-native run-android 来重启服务 5. ### react-navigation 返回并传递参数的方法

navigate('Detail', {
        // 跳转的时候携带一个参数去下个页面
          callback: (data) => {
              console.log(data); // 打印值为：'回调参数'
          }
        });
复制代码

const {navigate,goBack,state} = this.props.navigation;
// 在第二个页面,在goBack以前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法
state.params.callback('回调参数');
goBack();
复制代码

6. async 函数的断点调试方法

• 第一种 在须要打断点的地方debugger

  

• 第二种 利用vscode的调试功能

  

7. 建立无状态组件（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显得更简洁。 8. ### 组件的条件渲染注意点 根据条件来肯定是否渲染React元素时，只有变量为true时才会渲染。例如：

<div>
  {showHeader && <Header />}
  <Content />
</div>
复制代码

上面的JSX只会在showHeader为true时渲染

组件。

值得注意的是，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>
复制代码