如何使用 Yarn 和 Typescript 设置 React-Native

Question

所以到目前为止，我一直在使用准系统 react-native 和 npm 开发我的项目，一切顺利，但现在我遇到了问题

我需要在后期添加一个新功能，这会很头疼，因此我决定重新开始构建，因为我可以修复许多错误的编码和错误。

现在重做将是一个不同的设置我不打算使用 npm，我想使用 yarn。我不会单独使用 React-Native，我要配合 typescript 使用它！

现在问题来了我已经使用安装程序在 windows 笔记本电脑上安装了 yarn，但我不完全确定如何创建 react-native 应用程序并在此基础上添加打字稿。查看文档和其他论坛，关于如何创建 react-native 应用程序或如何使用它设置 typescript 的答案不断变化。所以请告诉我

如何在 windows 笔记本电脑上使用 yarn 和 typescript 设置 react-native 应用程序？

Answer 1

这对我有用：

创建你的 react-native 应用程序：

npx react-native init MyApp
cd MyApp

添加打字稿：

yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer

然后创建一个tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

还有一个jest.config.js

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
};

将您的 App.js 更改为 App.tsx。

就是这样。现在您可以根据需要使用更严格的 type 规则更改配置文件。

所有文档都在 https://reactnative.dev/docs/typescript.

旁注：npx react-native init MyApp --template react-native-template-typescript构建应用程序时出现错误。这就是为什么我尝试使用上述方法。

Answer 2

我想你可能已经安装了 $ apt install yarn 而不是使用 $ sudo npm install --global yarn.

然后尝试使用 npx 命令再次安装您的应用：

npx react-native init MyApp --template react-native-template-typescript

如何使用 Yarn 和 Typescript 设置 React-Native

How to setup React-Native with Yarn and Typescript

javascript

typescript

react-native

yarnpkg

create-react-native-app