ReactNative For Android 之三：工程结构
ReactNative For Android 之三：工程结构
- 一.目录
- 二.入口
- 三.入口文件
- 四.创建组件(参考上面例子)
系列文章：
ReactNative For Android 之一：环境搭建
ReactNative For Android 之二：基本组件和API
ReactNative For Android 之三：工程结构
ReactNative For Android 之四：自定义组件
ReactNative For Android 之五：自定义module
ReactNative For Android 之六：组件生命周期
一.目录
初始化项目后会自动带有
-
android文件夹：android项目文件夹
-
ios文件夹：ios项目文件夹
-
node_modules：源码
-
index.android.js:android的js入口文件
-
index.ios.js:ios的js入口文件
-
package.json:填写依赖的文件
二.入口
-
在android项目的MainActivity里的onCreate方法里可以看到,RN初始化了一大堆东西来构建自己的环境,其中的setJSMainModuleName就是指明入口js文件名的,在这里我讲index.android.js文件名改为了main.android.js,所以这里要对应上
-
startReactApplication方法的第二个参数是指明开启app时的根Component的key;在RN中,app的根组件需要调用AppRegistry.registerComponent(appKey,Component);来注册,这个appKey就是这里设置的参数值,创建项目时默认就为项目名;所以这个值要和注册时的key相对应上
-
在入口文件里注册了根组件,app就可以启动了,下面来看入口文件
三.入口文件
-
首先引入React，然后从React里引入View,Text,StyleSheet和AppRegistry组件以供后续使用
-
React.createClass({传入一个自定义的对象});生成一个Component,赋值给变量Main
-
最后一行就是刚刚说到的注册组件,这里讲Main作为根组件,key为在MainActivity里定义的key,注册到app里即可
-
最主要的就是组件是如何创建的
四.创建组件(参考上面例子)
-
js对象的props都是key:value的形式定义的,createClass方法传入一个我们自定义的对象即可,这个对象里的props可以有一些React的组件的生命周期方法,React会自动调用管理这些props,也可以有我们自定义的props供我们自己调用(如图中的_onPress为自定义的方法)；React管理的生命周期可以参考这篇文章。具体可参见官方文档。
-
这些props中最重要的是render这个属性,它是一个方法,是绘制组件的方法,我们定义的每个组件都要定义这个方法来实现自己的界面绘制,它返回一个组件对象即可
-
组件的使用也比较简单,通常用的方式就是JSX语法:< View propName={propValue}>{yourChildView}< /View>,在组件名后，>前定义props,如果有子view则在两个‘<>’之间定义子的组件即可
-
prop中相当重要的是style属性,就是定义样式的属性,使用的css的布局方式,用StyleSheet.create({自定义的各种style});即可定义,在使用时,往往都是在< View style={styles.yourStyleName}/>使用,从而实现了布局样式和逻辑代码的分离
-
刷新机制:可以参考这篇文章