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

qiushijie發表於2019-04-02
React NativeTypeScript

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'];
  }
}
複製程式碼

相關文章