使用React Native和TypeScript启动并运行

快速，现代的React Native和TypeScript入门指南

在本文中，我将介绍如何快速将TypeScript添加到React Native项目中。

如今，许多项目都在使用TypeScript。 它提供了JavaScript静态类型，并有助于简化各种组件之间的关系。

在我们的项目中，每当在文本编辑器中保存文件时，我们都会自动将TypeScript编译为可运行的JavaScript。

要查看最终样板，请单击此处。

该项目假设您已经安装了React Native CLI并在您的机器上工作

我们要做的第一件事是创建一个新的React Native项目：

 反应本征型脚本 

创建项目后，将cd进入目录

  cd rntype脚本 

接下来需要做的是确保我们在计算机上全局安装了TypeScript：

  npm i -g打字稿 

现在，我们需要继续安装React和React Native所需的类型。

这些类型为我们提供了React和React Native的声明文件。

 纱线添加@ types / react-native @ types / react 

现在我们已经建立了依赖关系，我们需要创建一个tsconfig.json文件。

该文件将让我们决定诸如根文件，编译器选项和已编译JavaScript的输出目录之类的内容，这些最终将在我们的应用程序中使用。

在目录的根目录中，使用以下选项创建一个tsconfig.json ：

  { 
  “ compilerOptions”：{// 1 
  “ target”：“ es2015”， 
  “ module”：“ es2015”， 
  “ jsx”：“反应”， 
  “ outDir”：“ build”， 
  “ rootDir”：“ src”， 
  “ allowSyntheticDefaultImports”：是的， 
  “ noImplicitAny”：是的， 
  “ experimentalDecorators”：是的， 
  “ preserveConstEnums”：是的， 
  “ allowJs”：是的， 
  “ sourceMap”：为true 
  }， 
  “排除”：[// 2 
  “ index.android.js”， 
  “ index.ios.js”， 
  “建立”， 
  “ node_modules”， 
  “ __tests__” 
  ]， 
  “ compileOnSave”：true // 3 
  } 

1. compilerOptions —在此键中，我们指定一些配置以确保该项目可与我们的React项目一起使用，指定TypeScript代码将在其中的根目录（ rootDir ），并在编译后的JavaScript将在其中指定输出目录（ outDir ）。
2. exclude —告诉打字稿要忽略哪些文件
3. compileOnSave —如果您使用的是Visual Studio或Atom编辑器（带有atom-typescript插件），则在保存文件时它将自动编译您的代码。 我们还将从命令行手动实现此功能，因此此配置可能是完全可选的。

现在，我们所有的配置和设置均已完成。 我们需要做的下一步是创建一个src目录，并在其中添加一个index.tsx文件：

  // index.tsx 

 从“反应”中导入React，{组件} 
 导入{ 
  StyleSheet， 
 文本， 
 视图 
  }来自“ react-native” 

 接口道具{} // 1 

 接口状态{// 2 
 名称：字符串 
  } 

 导出默认类App扩展Component  {// 3 

 状态= {名称：'纳德'} // 4 

  render（）{ 
 返回（ 
   
   
 欢迎{this.state.name}！  // 5 
   
   
  ）; 
  } 
  } 

  const styles = StyleSheet.create（{ 
 容器： { 
 弹性：1， 
  justifyContent：“中心”， 
  alignItems：'中心'， 
  backgroundColor：'＃F5FCFF'， 
  }， 
 文字：{ 
  fontSize：20， 
  textAlign：'居中'， 
 保证金：10， 
  }， 
  }）; 

1. 我们创建一个空的Props接口
2. 我们创建一个State接口，并将其name: string
3. 现在，当我们创建组件时，我们传入两个接口
4. 用一个值创建状态：name
5. 我们像在任何组件中一样使用状态

我们需要做的最后一件事是根据我们的平台更新index.ios.js或index.android.js文件。

 index.ios.js / index.android.js 

 从'react'导入React； 
 导入{ 
  AppRegistry 
  }来自“ react-native”； 

 从“ ./build”导入应用 

  const rntypescript = （） =>  

  AppRegistry.registerComponent（'rntypescript'，（） => rntypescript）; 

注意，我们不是从src目录导入的，因为这些是我们未编译的TypeScript文件。

我们想要的是经过编译的JavaScript，当我们在此步骤之后的下一步中编译我们的代码时，该JavaScript将显示在新的构建目录中，并将其作为App导入此处。

我们需要做的最后一件事是运行TypeScript编译器，然后打开我们的App！

在您的终端中，运行以下命令：

  tsc -w 

现在，如果我们查看应用程序，应该会看到一个包含编译代码的新构建目录。

从这一点来看，您应该能够像平常一样运行React Native应用程序。

最终代码可在此处下载。

我叫 Nader Dabit 。 我是 AWS Mobile 的开发人员倡导者， 负责 AppSync 和 Amplify 等项目 ，也是 React Native Training 的创始人 。

如果您喜欢React和React Native，请查看我们的播客-Devchat.tv上的React Native Radio。

另外，请查阅我的书《 React Native in Action》（可从Manning Publications获得）

如果您喜欢这篇文章，请推荐并分享！ 谢谢你的时间