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'];
  }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容