新建React Native工程使用TypeScript語言：RN版本升級持續更新建立方法

expo提供了跨平臺的api使用，在實際的開發過程當中體驗很是友好，官方也已經集成了expo，新版本react native在官方文檔中使用expo建立項目。

安裝expo

npm install -g expo-cli
複製代碼

建立

進入項目父目錄運行，會自動建立一個app目錄

expo init app
複製代碼

在運行命令後，根據狀況選擇選項，建議選擇expo-template-blank和advanced，選擇完成後會在當前目錄生成腳手架。

使用typescript

刪除babel.config.js 卸載babel-preset-expo npm uninstall babel-preset-expo 安裝typescript依賴 npm install @types/react @types/react-native @types/expo typescript -D 建立typescript配置文件 tsc --init 建立rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve("react-native-typescript-transformer");
  },
  getSourceExts() {
    return ["ts", "tsx"];
  }
};
複製代碼

修改源碼

修改App.js爲App.tsx

運行

npm run android
複製代碼

大功告成

修改（續）

RN >= 0.59

metro.config.js

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer')
  }
};
複製代碼

RN >= 0.57, < 0.59

rn-cli.config.js

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-typescript-transformer')
  }
}
複製代碼

RN < 0.57

rn-cli.config.js

module.exports = {
  getTransformModulePath() {
    return require.resolve('react-native-typescript-transformer');
  },
  getSourceExts() {
    return ['ts', 'tsx'];
  }
}
複製代碼