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>