React-Native学习笔记(二)

来源:互联网 发布:淘宝店铺0信誉出售 编辑:程序博客网 时间:2024/06/05 18:18

前面的学习笔记一配置了React-Native的运行环境,并运行了简单Demo,接下来试点稍深入的。假如我们想要更换开始运行的类——App,要怎么做呢?首先我们可以想到的是这个类应该是在文件中配置的,就像在AndroidManifest.xml通过intent-filter配置起始的Activity一样。那么我们来观察一下整个工程的目录文件


好像在哪里见到过"index.js"?对了,我们在修改编译所用的SDK版本时在app的build.gradle文件中好像看到过!去gradle文件中找。

project.ext.react = [    entryFile: "index.js"]
果然,就是这里!而且很明显的,这个index.js就是入口文件。接下来我们去看这个文件里做了什么
import { AppRegistry } from 'react-native';import App from './App';AppRegistry.registerComponent('RNLearnning', () => App);

RNLearnning是项目名,App就是运行时加载的类。到这里我们差不多知道怎么更换要运行的类了。有两种思路:

  1. 尝试把入口文件换了,比如我创建了一个entry.js的文件,文件内容
    import { AppRegistry } from 'react-native';import BlinkApp from './BlinkApp';AppRegistry.registerComponent('RNLearnning', () => BlinkApp);
    BlinkApp代码在这里,用State制作一段不停闪烁的文字,很简单,就不复制过来了。
    在gradle文件中修改如下
    project.ext.react = [    entryFile: "entry.js"]
    Sync,重新编译运行(如果报错就clean一下,需要在Terminal中再次执行react-native start,之后再运行),不幸的是运行报错(刺眼的大红界面)

    从报错界面可以看到有提示信息"index.android.bundle",和我们换掉"index.js"文件有关。看来这种思路暂时行不通。
  2. 接下来我们换另一种思路,更换index.js文件中的内容:
    import { AppRegistry } from 'react-native';import BlinkApp from './BlinkApp';AppRegistry.registerComponent('RNLearnning', () => BlinkApp);
    同样地,Sync,重新编译运行,不幸的是再次报错

    我们再回来仔细比较一下App.js和BlinkApp.js文件,看看这两个类有什么不同,不同的地方应该就是引起报错的原因。仔细比较后还真发现了不同的地方,原来的App类前有export default修饰限定,而我们的BlinkApp类前没有,难道是这个原因?不管那么多,先修改了试试。

    改完后运行大功告成!

到这里我们知道怎么去更换一开始运行的类了,就像原生的App更换起始的Activity。
原创粉丝点击