ReactNative For Android 之三：工程结构

最新推荐文章于 2022-09-30 10:41:00 发布

依生依世

最新推荐文章于 2022-09-30 10:41:00 发布

阅读量196

点赞数

分类专栏： ReactNative 知识积累 android相关文章标签： android reactnative 入口项目结构

本文链接：https://blog.csdn.net/qq_15827013/article/details/98086232

版权

63 篇文章 0 订阅

订阅专栏

34 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

一.目录

在这里插入图片描述
初始化项目后会自动带有

在这里插入图片描述

在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就可以启动了,下面来看入口文件

在这里插入图片描述

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}/>使用,从而实现了布局样式和逻辑代码的分离
刷新机制:可以参考这篇文章

关注