2013年，Facebook开源了React框架。去年上半年开源了基于React的ReactNative框架的iOS部分，下半年开源了Android部分。目前国内的QQ、天猫、携程、QZone等部分功能都是用ReactNative开发的。注：ReactNative以下部分用缩写RN代替，Node和Node.js均代表Node.js。限于篇幅，RN的原理，RN与Native和Hybrid的优缺点对比，RN和Flexbox的页面跳转等后面会分享。今天只介绍RN的基础开发，让大家对RN的开发有一个初步的了解。1.React的GitHub介绍是：Adeclarative,efficient,andflexibleJavaScriptlibraryforbuildinguserinterfaces。简单的说React就是一个JS库，一个可以用来写UI的库。ReactNative的GitHub介绍是：AframeworkforbuildingnativeappswithReact。ReactNative基于React，可以用来开发iOS和Android原生应用。2.ReactHelloWorld上面是一个React例子，就是一个简单的html文件，结果就是显示HelloCodeKK。内容主要分为三部分：第一部分介绍ReactJS文件，和一般JS文件的介绍没什么区别。第二部分是定义一个HelloMessage组件。组件的render函数render输出一个div，div的内容接受一个名为name的变量。第三部分是ReactDOM将HelloMessage组件渲染到示例DOM节点（body内的div）中。上面第二和第三部分是JSX语法，是Facebook对ECMAScript的扩展，即JavaScript语法扩展，基于XML样式。可选地，React也可以直接调用原生JS。JSX语法可以让前端代码更具可读性，同时像JavaWeb的Velocity和Node的Jade一样支持数据绑定。通过React，我们可以让UI代码基于组件化开发，可以更好的组合和复用，也更容易测试和维护。同时React通过VirtualDOM提升性能，不直接操作RealDOM实现快速渲染。3、新建一个ReactNativeHelloWorld完成必要的软件安装后，在命令行运行react-nativeinitAwesomeProject新建一个项目，其中AwesomeProject为项目名，运行react-nativerun-android或react-nativerun-ios在项目目录下打包Android或iOS应用，编译部署到对应的模拟器上运行。4.ReactNativeHelloWorld项目介绍4.1RN项目目录(1)android/ios文件夹用于存放Android/iOS平台需要单独适配的代码。以Android为例，android文件夹的内部目录结构与我们一般的Android工程是一样的。(2)index.android.js和index.ios.js文件分别是Android和iOS的启动入口，可以简单理解为Java的Main或者Android的LAUNCHER&MainActivity。通过在文件后缀前加上.android和.ios，ReactNative可以作为Android和iOS的独立适配文件。如果现在需要使用名为codekk的图片，图片目录下有两个文件codekk.png和codekk.android.png，那么iOS平台会打包codekk.png，Android平台会打包codekk.android。PNG文件。(3)package.json类似于一个Node项目，用于描述项目的基本信息和需要的依赖信息，比如默认对React和ReactNative的依赖。RN还使用Node.jsnpm进行依赖管理。(4)node_modules文件夹自动生成的文件夹存放的是package.json中配置的依赖源码和bin。(5)其他配置文件.watchmanconfig是watchman的配置文件。watchman用于监控文件变化，辅助实现项目修改所见即所得。.flowconfig是flow的配置文件，用于代码静态检查。.buckconfig是buck的配置文件。Buck是Facebook开源的高效编译系统。它适用于Android和iOS。它通过重用未修改的代码单元和增量编译来提高编译效率。4.2index.android.js的内容index.android.js和index.ios.js的内容默认是一样的，如下：这是一个js文件。运行react-nativerun-android命令后，其在Android模拟器中的运行结果为：显示WelcometoReactNative！在中心。文件内容主要分为三部分：(1)引入react中的Component、react-native中的View等需要的组件，类似Java和C++开发。(2)定义一个新的组件继承自Component，定义一个新的组件。组件的render函数返回一个View，View中包含一个Text控件。styles就是样式，类似于CSS。(3)注册组件AppRegistry是运行RNApps的JS入口，App的根组件需要通过AppRegistry.registerComponent进行注册。5.ReactNativeDebugging(1)InstantRun通过Debug菜单开启Atom编辑器的HotReloading和自动保存，达到修改代码后自动部署到模拟器的效果。LiveReload与HotReloading类似，只是LiveReload会重新进入App首页，而Hot可以在当前页面直接刷新。如果修改android和ios文件夹的内容或者添加新图片等，HotReloading是无法进行的，需要重新运行。(2)日志，添加console.log('responsefromcodekkis:'+response);console.error('erroris:'+error);在代码中打印日志。console.warnconsole.info等表示其他级别的日志。iOS日志在Xcode中打印。Android需要通过adblogcat*:SReactNative:VReactNativeJS:V命令在Terminal输出日志。(3)远程调试可以在ChromeDeveloperTools中调试ReactNative，如JS或Node.js，在上面的Debug菜单中选择DebugJSRemotely，默认会打开http://localhost:8081/debugger-ui调试页面，如下图：6.ReactNative基本组件ReactNative基本常用组件包括Text、Image、TextInput、ListView、View、WebView、Switch、Slider、ScrollView、MapView等，另外还有DrawerLayoutAndroid、ProgressBarAndroid、ToolBarAndroid等。仅适用于Android平台。仅适用于iOS平台的ProgressViewIOS、SegmentedControlIOS等。下面以Image和ListView为例简单介绍一下（1）Image组件，意思是显示本地图片codekk.png。不同分辨率的图片可以通过在文件名后缀前加@2x、@3x来表示，如codekk@2x.png、codekk@3x.png。也可以直接显示网络图片。(2)ListView组件在render函数中调用ListView控件，它有两个主要属性dataSource和renderRow。dataSource表示数据源，是一个数组，在组件构造函数中初始化。renderRow表示渲染每一行时会调用的函数，入参是dataSource中的一个数据，类似于Android的getView。ListView还支持分界线、Header和固定块Header、Footer、滚动监控、底部监控等功能。7、ReactNative网络RN支持三种请求方式：Fetch、WebSocket、XMLHttpRequest，其中Fetch方式使用比较常用。以Fetch为例：表示网络从http://api.codekk.com/op/page/1获取数据，并转换为JSON，然后输出。8.Android和iOS代码共享在4.1RN工程目录介绍中，我们可以看到分别有index.android.js和index.ios.js文件。让我们看看如何让Android和iOS实现简单的代码复用。将所有的index.android.js和index.ios.js文件修改为如下内容：让Android和iOS都调用index.js，在index.js中实现相同的启动逻辑。index.js内容如下：在android和ios文件夹同级目录下新建js目录，用于存放共享代码。这样，在index.js中的例子中，除了ViewPagerAndroidDemo和DrawerLayoutDemo只能在Android下运行外，其他的Demo都可以原封不动地运行在iOS上。以上所有代码都在https://github.com/trinea/react-native-demo中。【本文为专栏作家Trinea原创文章，转载联系作者获取授权】点此阅读作者更多好文
