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 importApp 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屋!