这是我第一次尝试使用typescript开发react-native

Typescript是javascript的超集。在javascript的基础上，增加了可选的静态类型，非常适合团队开发。这次我们尝试使用typescript来开发react-native应用。搭建react-native开发环境安装yarn和react-native命令行工具npminstall-gyarnreact-native-cliYarn是Facebook提供的替代npm的工具，可以加快node模块的下载速度。ReactNative的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packagers）等任务。ReactNative当前需要Xcode7.0或更高版本。您可以通过AppStore或Apple开发者网站下载它。此步骤将安装XcodeIDE和Xcode的命令行工具。虽然命令行工具一般都是默认安装的，但是最好还是启动Xcode，在Xcode|查看是否安装了某个版本的CommandLineTools。偏好|位置菜单。Xcode的命令行工具也包含了一些必要的工具，比如git。搭建ty??pescript开发环境，首先安装typescriptnpminstall-gtypescript，然后安装typingstypings是typescript的依赖管理器。如果使用sublimetext或者vscode，完成代码会很方便。npminstall-gtypings使用react-native命令行工具react-nativeprojectreact-nativeinitReactNativeApp进行初始化，稍等片刻后，进入新建的项目，新建一个名为“tsconfig.json”的文件。tsconfig.json是一个typescript项目的配置文件，可以读取它来设置ts编译器的编译参数，如下：{"compilerOptions":{"target":"es6","allowJs":true,"jsx“：“反应”，“outDir”：“./dist”，“sourceMap”：真，“noImplicitAny”：假}，“include”：[“typings/**/*.d.ts”，“src/**/*.ts","src/**/*.tsx"],"exclude":["node_modules"]}在项目下新建目录src，typescript源码放在这里现在安装typingsdependenciestypingsinstallnpm~react--savetypingsinstalldt~react-native--globals--saveWriteHelloworld在src目录下新建myview.tsx，内容如下import*asReactfrom"react"import{Text}from'react-native';/***Hello*/exportdefaultclassHelloextendsReact.Component{render(){return(Helloworld!);}}回到根目录，刚刚编译好的tsx文件tsc修改index.ios.jsimportReact,{Component}from'react';importHellofrom'./dist/myview';import{AppRegistry,StyleSheet,Text，看法}来自“本机反应”；exportdefaultclassReactNativeAppextendsComponent{render(){return();}}conststyles=StyleSheet.create({容器:{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'#F5FCFF',}});AppRegistry.registerComponent('ReactNativeApp',()=>ReactNativeApp);runrun-ios试试react-native的效果run-ios运行效果：作者信息本文来自Maxleapteam_cloud服务研发成员：xinghaidong【原创】MaxLeap博客首发：https://blog.maxleap.cn/archi...ReactJS开发相关推荐过程中的一些心得在ReactNative中使用ReactNative搭建类似Tinder的loaderAndroid原生模块欢迎扫描二维码关注我们的微信订阅号：