安装yarn和react-native命令行工具
npminstall -g yarnreact-native-cli
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
React Native目前需要Xcode 7.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具,比如git等。
先安装typescript
npminstall -g typescript
接下来安装typings typings是typescript的依赖管理器,如果你使用sublime text或者vscode,会非常方便的补全代码
npminstall -g typings
react-nativeinitReactNativeApp
等待片刻后,进入刚刚新建的项目,创建一个名为”tsconfig.json” 的文件。tsconfig.json是一个 typescript 项目的配置文件,可以通过读取它来设置 ts 编译器的编译参数 内容如下:
{ "compilerOptions": { "target": "es6", "allowJs": true, "jsx": "react", "outDir": "./dist", "sourceMap": true, "noImplicitAny": false }, "include": [ "typings/**/*.d.ts", "src/**/*.ts", "src/**/*.tsx" ], "exclude": [ "node_modules" ] }
在项目下新建一个目录”src”,typescripe源代码就放在这里
现在安装typings依赖
typingsinstallnpm~react --save typingsinstalldt~react-native --globals --save
在src目录下新建myview.tsx,内容如下
import * as Reactfrom "react" import { Text } from 'react-native'; /** * Hello */ exportdefault class Helloextends React.Component<null, null>{ render() { return ( Helloworld! ); } }
返回根目录,编译刚刚写好的tsx文件
tsc |
修改index.ios.js
importReact, { Component } from 'react'; importHellofrom './dist/myview'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; export default class ReactNativeApp extends Component { render() { return ( ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', } }); AppRegistry.registerComponent('ReactNativeApp', () => ReactNativeApp);
运行run-ios试试效果
react-nativerun-ios
– 力谱宿云LeapCloud 首发 –
作者信息
本文系Maxleap团队_云服务研发成员:xinghaidong 【原创】