React Native Typescript 模板不起作用

IT技术 reactjs typescript react-native
2021-04-30 01:28:49

我使用官方命令react-native init MyApp --template typescript(几次)创建了一个带有typescript模板的 React Native 新项目,但在运行应用程序时看不到我应用的更改。看起来热重新加载它的工作是刷新屏幕但不应用更改。在我创建没有typescript的应用程序的情况下,它的所有工作都正常。

我没有收到任何错误,所以我不知道我能做什么。在它下面的 package.json 以防万一这有助于但它基本上是自动生成的文件typescript template

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.58.4"
  },
  "devDependencies": {
    "@types/jest": "^24.0.0",
    "@types/react": "^16.8.2",
    "@types/react-native": "^0.57.34",
    "@types/react-test-renderer": "^16.8.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "24.1.0",
    "jest": "24.1.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.6.3",
    "ts-jest": "^23.10.5",
    "typescript": "^3.3.3"
  },
  "jest": {
    "preset": "react-native"
  }
}

配置文件

{
  "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"]
}

知道如何使用typescript获得本机react。谢谢!

2个回答

我找到了解决方案,基本上当您使用名为 App(App.js 和 App.tsx)的项目 apperar 2 文件中typescript模板创建react 本机应用程序时,基本上解决此问题的解决方案是转到 index.js 并替换

import App from './App'; 每次进口 App from './App.tsx';

索引.js

import {AppRegistry} from 'react-native';
import App from './App.tsx';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

您也可以解决删除.js文件的问题,以便索引指向.ts

似乎您没有执行负责删除App.js文件的安装后设置脚本无论如何,这不再是必需的,因为随着 React Native 0.59 的发布,安装后设置脚本将自动执行。