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>
複製代碼