範例

擴展 React Native

• 開發人員編寫並將React Native模塊發佈到npm，並在GitHub上開源。
• 製作模塊有助於發展React Native生態系統和社區。我們建議為您的用例編寫模塊並在npm上共享它們。
• 如果您對擴展本機功能感興趣，請閱讀Native Modules（iOS，Android）和Native UI Components（iOS，Android）上的指南。
• 尋找預建組件？檢查 JS.coach。

開發工具

React Native 的開發者都在哪?!

發出請求

fetch('https://mywebsite.com/mydata.json');

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

處理響應

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

async function getMoviesFromApi() {
  try {
    let response = await fetch(
      'https://facebook.github.io/react-native/movies.json'
    );
    let responseJson = await response.json();
    return responseJson.movies;
  } catch (error) {
    console.error(error);
  }
}

默認情況下，iOS將阻止任何未使用SSL加密的請求。如果需要從明文URL（以http開頭的URL）獲取，則首先需要添加App Transport Security異常。如果您提前知道您需要訪問哪些域，則為這些域添加例外更安全;如果直到運行時才知道域，則可以完全禁用ATS。但請注意，自2017年1月起，Apple的App Store審核將需要合理的理由來禁用ATS。有關更多信息，請參閱Apple的文檔。

使用其他網絡庫

var request = new XMLHttpRequest();
request.onreadystatechange = (e) => {
  if (request.readyState !== 4) {
    return;
  }

  if (request.status === 200) {
    console.log('success', request.responseText);
  } else {
    console.warn('error');
  }
};

request.open('GET', 'https://mywebsite.com/endpoint/');
request.send();

XMLHttpRequest的安全模型與Web上的安全模型不同，因為本機應用程序中沒有CORS的概念。

支援 WebSocket

var ws = new WebSocket('ws://host.com/path');

ws.onopen = () => {
  // connection opened
  ws.send('something'); // send a message
};

ws.onmessage = (e) => {
  // a message was received
  console.log(e.data);
};

ws.onerror = (e) => {
  // an error occurred
  console.log(e.message);
};

ws.onclose = (e) => {
  // connection closed
  console.log(e.code, e.reason);
};

舉手擊掌！

滾動列表，滑動頁面和縮放縮放