React Native Typescript 模板不起作用 [英] React Native Typescript Template doesn't work

问题描述

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

I have created a new project of React Native with a typescript template using the official command react-native init MyApp --template typescript (a couple of times) and I can't see the changes I apply when I run the app. Looks like the hot reload its working on terms of refresh the screen but doesn't apply the changes. In the case I create the app without typescript all its working properly.

我没有收到任何错误，所以我不知道我能做什么.在它的 package.json 下方，以防万一，但它基本上是从 typescript 模板

I don't get any error so I have no idea what I can do. Below its the package.json in case this help but its basically the autogenerated file from 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"
  }
}

tsconfig.json

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

知道如何使用打字稿进行本机反应.谢谢！

Any idea how I can get react-native working with typescript. Thanks!

推荐答案

我找到了解决方案，基本上当您使用 typescript 模板react native 应用程序时> 在您的项目的 ./中，有 2 个名为 App(App.js 和 App.tsx)的文件，所以基本上让这个工作的解决方案是转到 index.js 并替换

I have find the solution, and basically when you create the react native app using the typescript template in the ./ of your project apperar 2 files named App (App.js and App.tsx) so basically the solution to get this working is go to the index.js and replace

import App from './App'; per import App from './App.tsx';

import App from './App'; per import App from './App.tsx';

index.js

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

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

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

Also you can solve the problem removing the .js file so the index will point to the .ts

这篇关于React Native Typescript 模板不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！