1、准备工作:
①首先搭建React Native环境,http://facebook.github.io/react-native/docs/getting-started.html
②用真机运行(我用华为荣耀6)。
③react-native run-android这句不需要执行。直接用Android Studio导入项目。
④开启服务器端:react-native start
⑤运行Android Studio中的该项目,会出现红屏。解决红屏需要:调出Dev Setting(华为荣耀6是摇晃手机调出Dev Setting),设置Debug的服务器地址与端口号。
2、开发前说明
①React Native遵循ES6规范。
ES6是对JavaScript的改进,但目前并不支持所有浏览器,所以在Web开发方面并不是很常用。React Native搭载ES6支持,所以完全不需要担心兼容性问题,请随意使用ES6元素import
, from
, class
, extends
, 和语法 () =>
如果不熟悉ES6,也没关系。语法看多了就会懂,或者点这个连接大致浏览一下this page
②React Native支持JSX语言
开发时除了会看到import,from等之外,还会有<Text>Hello World</Text>,这就是JSX语言。
3、开发Hello World
修改入口文件index.android.js:
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
运行android项目,即可看到Hello World!字样。
4、理解Hello World程序
①为什么入口文件是index.android.js文件。
通过项目中的AndroidManifest.xml得知主Activit为MainActivity,而MainActivity继承自ReactActivity:
public class MainActivity extends ReactActivity {
ReactActivity的onCreate方法调用了getReactNativeHost().getReactInstanceManager()方法:
mReactRootView.startReactApplication(
getReactNativeHost().getReactInstanceManager(),//-----调用ReactNativeHost.java中的createReactInstanceManager()方法。
getMainComponentName(),
getLaunchOptions());
setContentView(mReactRootView);//---------------------将mReactRootView设置为布局。
getReactInstanceManager()方法调用了ReactNativeHost.java中的createReactInstanceManager()方法:
public ReactInstanceManager getReactInstanceManager() {
if (mReactInstanceManager == null) {
mReactInstanceManager = createReactInstanceManager();
}
return mReactInstanceManager;
}
---------
protected ReactInstanceManager createReactInstanceManager() {
ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
.setApplication(mApplication)
.setJSMainModuleName(getJSMainModuleName())
.setUseDeveloperSupport(getUseDeveloperSupport())
.setInitialLifecycleState(LifecycleState.BEFORE_CREATE);
for (ReactPackage reactPackage : getPackages()) {
builder.addPackage(reactPackage);
}
String jsBundleFile = getJSBundleFile();
if (jsBundleFile != null) {
builder.setJSBundleFile(jsBundleFile);
} else {
builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));
}
return builder.build();
}
其中,setJSMainModuleName()方法就是配置入口JS的地方:
/**
* Returns the name of the main module. Determines the URL used to fetch the JS bundle
* from the packager server. It is only used when dev support is enabled.
* This is the first file to be executed once the {@link ReactInstanceManager} is created.
* e.g. "index.android"
*/
protected String getJSMainModuleName() {
return "index.android";
}
当然,IOS的react-native包中的getJsMainModuleName会指向“index.ios”。
②新建类都继承Component类
如上面HelloWorld代码中HelloWorldApp类,是继承自Component类,Component是react中的一个类。这样的子类可以使用标签形式(<HelloWorldApp>)被调用,可理解为android中的View组件。
另外每个类,都必须有reader()方法,且内部必须返回一个JSX代码块,以达到像android中View似的视图展示的目的。
③AppRegistry注册当前页面,并指示入口类。
https://github.com/facebook/react-native/blob/master/Libraries/AppRegistry/AppRegistry.js
1.registerConfig(config:Array<AppConfig>) static 静态方法, 进行注册配置信息
2.registerComponent(appKey:string,getComponentFunc:ComponentProvider) static静态方法,进行注册组件
3.registerRunnable(appKey:string,func:Function) static静态方法 ,进行注册线程
4.registerAppKeys() static静态方法,进行获取所有组件的keys值
5.runApplication(appKey:string,appParameters:any) static静态方法, 进行运行应用
6.unmountApplicationComponentAtRootTag() static静态方法,结束应用