React Native && TypeScript: 二、使用expo创建项目

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'];
  }
}