React Native开发android应用

前端之家收集整理的这篇文章主要介绍了React Native开发android应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、准备工作:

①首先搭建React Native环境,http://facebook.github.io/react-native/docs/getting-started.html

②用真机运行(我用华为荣耀6)。

react-native runandroid这句不需要执行。直接用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,fromclassextends() =>

如果不熟悉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静态方法,结束应用

猜你在找的React相关文章