2018-08-28 23:01:18 fengyuzhengfan 阅读数 909
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57505 人正在学习 去看看 李宁

期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!!

在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。

混合开发的一些其他应用场景:

在原有项目中加入RN页面,在RN项目中加入原生页面

RNHybrid

原生页面中嵌入RN模块

Native-RN-page

RN页面中嵌入原生模块

RN-Native-page

以上这些都属于React Native混合开发的范畴,那么如何进行React Native混合开发呢?

在这篇文章中我将向大家介绍React Native混合开发的流程,需要掌握的技术,以及一些经验技巧,与该文章配套的还有React Native与Android 混合开发讲解的视频教程

React Native混合开发的教程我们分为上下两篇,上篇主要介绍**如何在现有的Android应用上进行React Native混合开发,下篇主要介绍如何在现有的iOS应用上进行React Native混合开发**。

将React Native集成到现有的Android应用中需要如下几个主要步骤:

  • 首先,你需要有一个React Native项目;
  • 为已存在的Android应用添加React Native所需要的依赖;
  • 创建index.js并添加你的React Native代码;
  • 创建一个Activity来承载React Native,在这个Activity中创建一个ReactRootView来作为React Native服务的容器;
  • 启动React Native的Packager服务,运行应用;
  • (可选)根据需要添加更多React Native的组件;
  • 运行、调试、打包、发布应用;
  • 升职加薪、迎娶白富美,走向人生巅峰!;

1. 创建一个React Native项目

在做混合开发之前我们首先需要创建一个没有Android和iOS模块的React Native项目。我们可以通过两种方式来创建一个这样的React Native项目:

  • 通过npm安装react-native的方式添加一个React Native项目;
  • 通过react-native init来初始化一个React Native项目;

通过npm安装react-native的方式添加一个React Native项目

第一步:创建一个名为RNHybridApp的目录,然后在该目录下添加一个包含如下信息的package.json

{
  "name": "RNHybrid",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}

第二步:在为package.json添加react-native

在该目录下执行:

npm install --save react-native

执行完上述命令之后,你会看到如下警告:

npm-install--save-react-native.png

其中,有一条警告npm WARN react-native@0.55.4 requires a peer of react@16.3.1 but none is installed告诉我们需要安装react@16.3.1

npm install --save react@16.3.1

至此,一个不含Android和iOS模块的React Native项目便创建好了。此过程所遇到的更多问题可查阅:React Native与Android 混合开发讲解的视频教程

提示:npm 会在你的目录下创建一个node_modulesnode_modules体积很大且是动态生成了,建议将其添加到.gitignore文件中;

通过react-native init来初始化一个React Native项目

除了上述方式之外,我们也可以通过react-native init命令来初始化一个React Native项目。

react-native init RNHybrid

上述命令会初始化一个完成的名为RNHybrid的React Native项目,然后我们将里面的androidios目录删除,替换成已存在Android和iOS项目。

2. 添加React Native所需要的依赖

在上文中我们已经创建了个一个React Native项目,接下来我们来看一下如何将这个React Native项目和我们已经存在的Native项目进行融合。

在进行融合之前我们需要将已经存在的Native项目放到我们创建的RNHybrid下,比如:我有一个名为RNHybridAndroid的Android项目,将其放到RNHybrid目录下:

RNHybrid
├── RNHybridAndroid
├── package.json
├── node_modules
└── .gitignore

第一步:配置maven

接下来我们需要为已经存在的RNHybridAndroid项目添加 React Native依赖,在RNHybrid/RNHybridAndroid/app/build.gradle文件中添加如下代码:

dependencies {
    compile 'com.android.support:appcompat-v7:23.0.1'
    ...
    compile "com.facebook.react:react-native:+" // From node_modules
}

app-build.gradle

然后,我们为RNHybridAndroid项目配置使用的本地React Native maven目录,在RNHybrid/RNHybridAndroid/build.gradle文件中添加如下代码:

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
        ...
    }
    ...
}

maven-directory-to-build.gradle

提示:为确保你配置的目录正确,可以通过在Android Studio中运行Gradle sync 看是否有 “Failed to resolve: com.facebook.react:react-native:0.x.x" 的错误出现,没有错误则说明配置正确,否则说明配置路由有问题。
此过程所遇到的更多问题可查阅:React Native与Android 混合开发讲解的视频教程

第二步:配置权限

接下来我们为APP运行配置所需要的权限:检查你项目中的AndroidManifest.xml文件中看是否有如下权限:

<uses-permission android:name="android.permission.INTERNET" />

如果没有,则需要将上述权限添加到AndroidManifest.xml中。

另外,如果你需要用到RN的Dev Settings功能:

DevSettingsActivity

则需要在AndroidManifest.xml文件中添加如下代码:

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

提示:上述图片就是RN 开发调试弹框中的Dev Settings功能,打开该功能会弹出上图的一个界面,这个界面就是DevSettingsActivity。

第三步:指定要ndk需要兼容的架构(重要)

Android不能同时加载多种架构的so库,现在很多Android第三方sdks对abi的支持比较全,可能会包含armeabi, armeabi-v7a,x86, arm64-v8a,x86_64五种abi,如果不加限制直接引用会自动编译出支持5种abi的APK,而Android设备会从这些abi进行中优先选择某一个,比如:arm64-v8a,但如果其他sdk不支持这个架构的abi的话就会出现crash。如下图:

libgnustl_shared.so"-is-32-bit-instead-of-64-bit

怎么解决呢:

app/gradle 文件中添加如下代码:

defaultConfig {
....
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
}

上述代码的意思是,限制打包的so库只包含armeabi-v7ax86此过程所遇到的更多问题可查阅:React Native与Android 混合开发讲解的视频教程

可参考:libgnustl_shared.so" is 32-bit instead of 64-bit

3.创建index.js并添加你的React Native代码

通过上述两步,我们已经为RNHybridAndroid项目添加了React Native依赖,接下来我们来开发一些JS代码。

在RNHybrid目录下创建一个index.js文件并添加如下代码:

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('App1', () => App);

上述代码,AppRegistry.registerComponent('App1', () => App);目的是向React Native注册一个名为App1的组件,然后我会在第四步给大家介绍如何在Android中加载并显示出这个组件。

另外,在上述代码中我们引用了一个App.js文件:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          this is App
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
 });

这个App.js文件代表了我们React Native的一个页面,在这个页面中显示了this is App的文本内容。

以上就是为本次演示所添加的React Native代码,你也可以根据需要添加更多的React Native代码以及组件出来。

4. 为React Native创建一个Activity来作为容器

经过上述3、4步,我们已经为RNHybridAndroid项目添加了React Native依赖,并且创建一些React Native代码和注册了一个名为App1的组件,接下来我们来学习下如何在RNHybridAndroid项目中使用这个App1组件。

创建RNPageActivity

首先我们需要创建一个Activity来作为React Native的容器,

public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            .setUseDeveloperSupport(BuildConfig.DEBUG)
            .setInitialLifecycleState(LifecycleState.RESUMED)
            .build();
        // 这个"App1"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
        mReactRootView.startReactApplication(mReactInstanceManager, "App1", null);

        setContentView(mReactRootView);
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
}

参数说明

  • setBundleAssetName:打包时放在assets目录下的JS bundle包的名字,App release之后会从该目录下加载JS bundle;
  • setJSMainModulePath:JS bundle中主入口的文件名,也就是我们上文中创建的那个index.js文件;
  • addPackage:向RN添加Native Moudle,在上述代码中我们添加了new MainReactPackage()这个是必须的,另外,如果我们创建一些其他的Native Moudle也需要通过addPackage的方式将其注册到RN中。需要指出的是RN除了这个方法外,也提供了一个addPackages方法用于批量向RN添加Native Moudle;
  • setUseDeveloperSupport:设置RN是否开启开发者模式(debugging,reload,dev memu),比如我们常用开发者弹框;
  • setInitialLifecycleState:通过这个方法来设置RN初始化时所处的生命周期状态,一般设置成LifecycleState.RESUMED就行,和下文讲的Activity容器的生命周期状态关联;
  • mReactRootView.startReactApplication:它的第一个参数是mReactInstanceManager,第二个参数是我们在index.js中注册的组件的名字,第三个参数接受一个Bundle来作为RN初始化时传递给JS的初始化数据,它的具体用法我会在**React Android 混合开发讲解的视频教程**中再具体的讲解;

在中AndroidManifest.xml注册一个RNPageActivity

Android系统要求,每一个要打开的Activity都要在AndroidManifest.xml中进行注册:

<activity
    android:name=".RNPageActivity"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar" />

上述代码中我们为RNPageActivity添加了一个@style/Theme.AppCompat.Light.NoActionBar类型的theme,这也是React Native UI组件所要求的主题。

为ReactInstanceManager添加Activity的生命周期回调

一个 ReactInstanceManager可以被多个activities或fragments共享,所以我们需要在Activity的生命周期中回调ReactInstanceManager的对于的方法。

 @Override
protected void onPause() {
    super.onPause();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostPause(this);
    }
}

@Override
protected void onResume() {
    super.onResume();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostResume(this, this);
    }
}

@Override
public void onBackPressed() {
    if (mReactInstanceManager != null) {
        mReactInstanceManager.onBackPressed();
    } else {
        super.onBackPressed();
    }
}

@Override
protected void onDestroy() {
    super.onDestroy();

    if (mReactInstanceManager != null) {
        mReactInstanceManager.onHostDestroy(this);
    }
    if (mReactRootView != null) {
        mReactRootView.unmountReactApplication();
    }
}

从上述代码中你会发现有个不属于Activity生命周期中的方法onBackPressed,添加它的目的主要是为了当用户单击手机的返回键之后将事件传递给JS,如果JS消费了这个事件,Native就不再消费了,如果JS没有消费这个事件那么RN会回调invokeDefaultOnBackPressed代码。

@Override
public void invokeDefaultOnBackPressed() {
    super.onBackPressed();
}

此过程更细致的讲解可查阅:React Native与Android 混合开发讲解的视频教程

添加开发者菜单

在RN中有个很好用的工具开发者菜单,我们平时调试RN应用时对它的使用频率很高,接下来我们来为RNHybridAndroid添加开着菜单。

 public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (getUseDeveloperSupport()) {
        if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
	}
    return super.onKeyUp(keyCode, event);
}

通过上代码即可监听Ctrl + M来打开RN开发者菜单。

ctrl+m-android

另外,RN也提供了双击R来快速加载JS的功能,通过如下代码即可打开该功能:

public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (getUseDeveloperSupport()) {
        if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer).didDoubleTapR(keyCode, getCurrentFocus());
        if (didDoubleTapR) {//双击R 重新加载JS
            mReactInstanceManager.getDevSupportManager().handleReloadJS();
            return true;
        }
    }
    return super.onKeyUp(keyCode, event);
}

此过程更细致的讲解可查阅:React Native与Android 混合开发讲解的视频教程

使用ReactActivity来作为RN容器

在上述的代码中我们都是通过ReactInstanceManager来创建和加载JS的,然后重写了Activity的生命周期来对ReactInstanceManager进行回调,另外,重写了onKeyUp来启用开发者菜单等功能。

另外,查看RN的源码你会发现在RN sdk中有个叫ReactActivity的Activity,该Activity是RN官方封装的一个RN容器。另外,在通过react-native init命令初始化的一个项目中你会发现有个MainActivity是继承ReactActivity的,接下来我们就来继承ReactActivity来封装一个RN容器。

public class ReactPageActivity extends ReactActivity implements IJSBridge{
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "App1";
    }
}

另外,我们需要实现一个MainApplication并添加如下代码:

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

上述代码的主要作用是为ReactActivity提供ReactNativeHost,查看源码你会发现在ReactActivity中使用了ReactActivityDelegate,在ReactActivityDelegate中会用到MainApplication中提供的ReactNativeHost

 protected ReactNativeHost getReactNativeHost() {
    return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost();
}

另外实现了MainApplication之后需要在AndroidManifest.xml中添加MainApplication

 <application
        android:name=".MainApplication"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        ...

以上就是通过继承ReactActivity的方式来作为RN容器的。

那么这两种方式各有什么特点:

  • 通过ReactInstanceManager的方式:灵活,可定制性强;
  • 通过继承ReactActivity的方式:简单,可定制性差;

此过程更细致的讲解可查阅:React Native与Android 混合开发讲解的视频教程

5. 运行React Native

经过上述的步骤,我们已经完成了对一个现有Android项目RNHybridAndroid添加了RN,并且通过两种方式分别创建了一个RNPageActivityReactPageActivity的Activity来加载我们在JS中注册的名为App1的RN 组件。

接下来我们来启动RN服务器,运行RNHybridAndroid项目打开RNPageActivityReactPageActivity来查看效果:

npm start

RNHybrid的根目录运行上述命令,来启动一个RN本地服务:

npm-start

然后我们打开AndroidStudio,点击运行按钮或者通过快捷键Ctrl+R来将RNHybridAndroid安装到模拟器上:

this-is-app-android

6. 添加更多React Native的组件

我们可以根据需要添加更多的React Native的组件:

import { AppRegistry } from 'react-native';
import App from './App';
import App2 from './App2';

AppRegistry.registerComponent('App1', () => App);
AppRegistry.registerComponent('App2', () => App);

然后,在Native中根据需要加载指定名字的RN组件即可。

7. 调试、打包、发布应用

调试

调试这种混合的RN应用和调试一个纯RN应用时一样的,都是通过上文中说讲到的RN 开发者菜单,另外搭建也可以通过学习React Native技术精讲与高质量上线APP开发课程来掌握更多RN调试的技巧。

打包

虽让,通过上述步骤,我们将RN和我们的RNHybridAndroid项目做了融合,但打包RNHybridAndroid你会发现里面并不包含JS部分的代码,如果要将JS代码打包进Android Apk包中,可以通过如下命令:

react-native bundle --platform android --dev false --entry-file index.js --bundle-output RNHybridAndroid/app/src/main/assets/index.android.bundle --assets-dest RNHybridAndroid/app/src/main/res/

参数说明

  • --platform android:代表打包导出的平台为Android;
  • --dev false:代表关闭JS的开发者模式;
  • -entry-file index.js:代表js的入口文件为index.js
  • --bundle-output:后面跟的是打包后将JS bundle包导出到的位置;
  • --assets-dest:后面跟的是打包后的一些资源文件导出到的位置;

提示:JS bundle一定要正确放到你的Android言语的assets目录下这个和我们上文中配置的setBundleAssetName("index.android.bundle")进行对应。

发布应用

通过上述步骤我们完成了将RN代码打包并生成JS bundle,并放到了assets目录下,接下来我们就可以来通过Android Studio或者命令的方式来release我们的RN混合Android应用了。

我在之前发表过React Native发布APP之签名打包APK的博文,
需要的同学可以去看一下,在这篇文章中就不在重复了。

更多React Native混合开发的实用技巧,可学习与此文章配套的视频课程:《React Native与Android 混合开发讲解》

参考

2017-10-16 21:46:22 fengyuzhengfan 阅读数 1842
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57505 人正在学习 去看看 李宁

期待已久的新课上线啦!解锁React Native开发新姿势,一网打尽React Native最新与最热技术,点我Get!!!

众所周知用React Native是可以开发跨平台的Android和iOS App。我们可以用React Native开发Android应用也可以开发iOS应用,那么如何让我们开发的React Native应用适配Android和iOS双平台呢?

在这篇文章中我将从布局、组件选择、图片、性能问题、Bugs等几个方面来谈一谈Android和iOS的适配问题。

布局

React Native在布局方面采用的是Flexbox,为了能让代码有更高复用性以及兼容性,我们可以将Android和iOS的样式尽量保持一致。

善用Platform.OS

为了提高代码的兼容性,我们有时需要判断当前系统的平台,然后做一些适配。比如,我们在使用StatusBar做导航栏的时候,在iOS平台下根视图的位置默认情况下是占据状态栏的位置的,我们通常希望状态栏下面能显示一个导航栏,所以我们需要为StatusBar的外部容器设置一个高度:

<View style={{height: Platform.OS === 'ios' ? 20:0}}>
    <StatusBar {...this.props.statusBar} />
</View>;

源代码

另外,在为视图设置阴影的时候我们需要用到Shadow Propsapi,而该api支持iOS平台,在Android平台下设置阴影我们需要用到elevation

留意api doc的android或ios标识

并不是所有React Native的一些api或组件的一些属性和方法都兼容Android和iOS,在React Native的api doc中通常会在一些属性或方法的前面加上android或ios的字样来标识该属性或方法所支持的平台,如:

android renderToHardwareTextureAndroid bool
ios shouldRasterizeIOS bool

在上述代码中,renderToHardwareTextureAndroid bool只支持Android平台,ios shouldRasterizeIOS bool只支持iOS平台,所有我们在使用这些带有标记的属性或方法的时候就需要考虑对于它们不兼容的平台我们是否需要做相应的适配了。

组件选择

React Native发展到现在已经有相当丰富的组件来供开发者使用,那么从适配Android和iOS平台的角度如何甄选这些组件呢?

比如,我们要开发一款应用需要用到导航组件,在React Native组件中有NavigatorIOSNavigator两个导航组件来供我们选择,从api doc中我们可以看出NavigatorIOS只支持iOS平台,Navigator则两个平台都支持。
所以如果我们要开发的应用需要适配Android和iOS,那么Navigator才是最佳的选择。

另外,类似的例子还有底部导航的TabBarIOSToolbarAndroid等。

心得:为了提高代码的复用性与兼容性建议大家在选择React Native组件的时候要多留意该组件是不是兼容Android和iOS,尽量选择Android和iOS平台都兼容的组件。

图片适配

开发一款应用少不了的需要用到图标。无论是Android还是iOS,现在不同分辨率的设备越来越多,我们希望这些图标能够适配不同分辨率的设备。为此我们需要为每个图标提供1x、2x、3x三种大小的尺寸,React Native会根据屏幕的分辨率来动态的选择显示不同尺寸的图片。比如:在img目录下有如下三种尺寸的check.png

└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

那么我们就可以通过下面的方式来使用check.png

<Image source={require('./img/check.png')} />

提示:我们在使用具有不同分辨率的图标时,一定要引用标准分辨率的图片如require('./img/check.png'),如果我们这样写require('./img/check@2x.png'),那么应用在不同分辨率的设备上都只会显示check@2x.png图片,也就无法达到图片自适配的效果。

性能问题

对于大多数想用React Native开发应用的开发者来说,都很关心React Native的性能问题,React Native和H5+WebView以及原生应用之间的性能对比是:WebView<React Native<原生应用。从大多说采用React Native开发应用的开发者的反馈来看,React Native的性能是远大于WebView但略低于原生应用,毕竟React Native和原生语言之间还需要一个Bridge。

提示:对性能要求较高的操作,比如:多线程、数据库操作、图片处理等,如果React Native组件或api无法满足需求的话,我们可以借助原生模块来实现。
关于如何开发React Native原生模块大家可以参看双平台真实开发GitHub App React Native技术全面掌握

Bugs

对于React Native的Bug我们可以提IssuePull Request,另外也可以关注React Native的版本发布releases,每次版本发布都会修复一些Bug,以及添加一些新的功能与api。

以上便是我对于React Native适配Android和iOS上的一些心得,
如果大家在适配Android和iOS中遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。
另外也可以关注我的新浪微博,或者关注我的Github来获取更多有关React Native开发的技术干货

2017-05-08 21:02:13 keen_zuxwang 阅读数 2303
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57505 人正在学习 去看看 李宁

vscode react native 开发:
(vscode免费开源的现代化轻量级代码编辑器, 针对React Native端的开发, React Native项目的JAVA端可用android studio进行开发)

1、首先确保已安装好react-native命令行工具

npm install react-native-cli -g

2、命令行创建项目

react-native init myrnprj
cd myrnprj
react-native start //开启packger server, 
                    //也可以在vscode的终端界面下输入(会自动定位到当前项目根目录下)react-native start

3、打开项目(在项目文件夹,右键选择Open with Code即可)为vscode安装必要的插件、添加、编辑inde.android.js等react native端的功能文件

安装插件:
可在点击“扩展”项(Ctrl+Shift+X),在搜索栏输入需安装的插件名或关键字,然后选择自己想要的安装
这里写图片描述
React Native Tools:
React Native原型编码、调试、集成React Native命令等
eslint:
代码静态检查,检测低级的语法错误,又能规范代码格式和应用最佳实践
typings:
基于typescirpt的接口文件

代码智能提示react-native:
全局安装typings(保证已安装typings即可):

npm install typings -g

项目根目录下安装React和react-native的接口说明文件:

typings install dt~react --save
typings install dt~react-native --save

4、调试、运行
配置调试选项,点击debugger icon(Ctrl+Shift+D) -> 配置icon -> 选择React Native
这里写图片描述

打开android真机/模拟器,开始调试(菜单、命令行两种方式):
1、点击运行箭头或者Fn+F5按键
2、命令面板终端(Ctrl+Shift+P)中使用React Native命令:

React Native: Run Android

这里写图片描述
a、初次应用运行,android真机/模拟器会显示“Could not get BatchedBridge, make sure your bundle is packaged correctly”界面
android 5.0版本以上,项目目录下命令行执行:

adb reverse tcp:8081 tcp:8081

android 5.0版本以下:(android真机/模拟器和pc端,需在同一网段才保持调试运行时彼此能正常通信,类似如此C/S)
点击右下角的菜单按键Menu,打开Developer Menu界面,点击Dev Settings -> Debug server host & port for device
设置ip地址(react-native start运行端地址即pc端地址)和port端口号(8081),如:192.168.8.142:8081
b、返回,重新打开Developer Menu界面,点击Reload重新加载index.android.js,一切正常则会显示功能界面了
c、Developer Menu中点击Enable Live Reload项,开启动态加载功能,js代码发生变化后,React Native会自动生成bundle然后传输到模拟器或手机上

Debug JS Remotely:
启动JS远程调试功能 — pc端会自动打开chrome调试界面”http://localhost:8081/debugger-ui“(前提是pc上得安装有chrome),
若失败则android真机/模拟器会显示“Unable to connect with remote debugger”界面
着重关注chrome调试面板的 Sources(调试) Console(打印输出)菜单项:
如在Sources菜单界面,勾选”Pause On Caught Exceptions”功能,则Chrome 开发者工具能够在错误代码处停住,基本调试跟一般的前端开发相同。

Enable Live Reload:
会在保持你的程序状态的情况下,就可以将最新的代码部署到设备上,但每次都会自动返回到启动页面

Hot Reloading:
会自动生成此次修改代码的增量包,然后传输到手机或模拟器上以实现热加载

2019-02-23 16:49:37 baidu_39503346 阅读数 172
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57505 人正在学习 去看看 李宁

React Native是React在移动端的跨平台方案 ,开启了开发原生App的新方式。学习React Native需要熟悉React。

React Native是基于React设计的。其官网的介绍是使用React构建Native应用框架,它采用的语法也是React。

需要安装软件

Node.js和npm、React Native(react-native-cli)、NVM(Node.js Version Manager,来管理Node.js版本) 

创建项目:

react-native init "project name"

React:提出的是一个新的开发模式和理念,他强调的是“用户界面”。

React三个特点

作为UI(Just the UI):React可以只作为视图(View)在MVC中使用。

虚拟DOM(Virtual DOM):可以很好的优化视图的渲染和刷新,它是React的一个亮点,也是重要的一个特性。、

数据流(Data Flow):React实现了单向的数据流,并且在数据绑定上更加灵活、便捷。

React学习需要的知识

JSX语法知识:JSX的官方解释是其语法类似于XML,而HTML是XML的子集。

ES6相关知识:因为ES6增加了很多语法特性和新功能,使用它可以进行快速的功能开发。

前端基础知识:最基础的要求需要具备基本的前端知识,CSS和JavaScript比较重要。

React Native开发流程

设计阶段:1、需求分析;2、组件规划

开发阶段:1、入口组件;2、功能入口组件;3、功能集合[n](n:可有多个)

打包更新机制:1、代码更新:a、本地存储,b、远程拉取,c、版本管理;2、自动打包

React Native引进原因

为了将开发成本和用户体验做到平衡。它的跨平台特性和使用JavaScript作为开发语言广受欢迎。它不仅可以使用前端开发模式来开发应用,还能调用原生的UI组件和API。它兼顾了开发效率,提高了用户体验。

React Native学习地址

React Native官网:http://facebook.github.io/react-native/

React Native版本发布:http://github.com/facebook/react-native/releases

React Native Github地址:http://github.com/facebook/react-native

疑难问题搜索:https://github.com/facebook/react-native/issues

 

2016-03-16 22:29:39 limm33 阅读数 4626
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57505 人正在学习 去看看 李宁

最近要学习React Native,但是在window上搭建开发环境的时候遇到了些问题,以至于一直没有搭建好开发环境。

React Native相关项目及文档:

react-native的GitHub地址:https://github.com/facebook/react-native

react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html

window上搭建React Native开发环境其问题及操作步骤:

一、准备工作

1、安装Git from Windows,并确保path中有git的环境变量可以在命令中使用。

2、有Android SDK并配置ANDROID_HOME环境推荐,将SDK的platform-tools子目录加入系统PATH环境变量。

3、安装node.js最新版,一定是最新版,否则在执行init初始化项目的时候,会出现问题。

二、开始操作

1、配置我们下载的国内镜像路径(因为众所周知的网络问题)

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist


2、安装react-native命令行工具

npm install -g react-native-cli


3、在window上cd到你的工作目录下创建项目

react-native init MyProject

这个过程可能比较长,需要等待下载。


4、输入react-native start命令运行packager并进行查看,可以看到端口号为8081


如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从120000改为更大的值(单位是毫秒)


在浏览器输入地址:http://localhost:8081/index.android.bundle?platform=android查看是否显示打包后的脚本。


5、运行模拟器或准备好真机,如果是真机要配置好驱动,使得adb devices可以看到对应的设备。


6、安卓运行


保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行


如上图说明成功了。

如果报Activity class {package/class} does not exist,说明存在相同报名修改package就可以了。

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

至此,应该能看到APP运行,并报错 Unable to download JS bundle

摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。


如果reload JS不可以还是红屏,控制台报错:TransformError: E:\nodejsproject\react\hello\node_modules\react-native\node_modules\react-transform-hmr\node_modules\react-proxy\node_mod ules\react-deep-force-update\lib\index.js: [BABEL] E:\nodejsproject\react\hello\node_modules\react-native\node_modules\react-transform-hmr\node_mo dules\react-proxy\node_modules\react-deep-force-update\lib\index.js: Unknown option: E:\nodejsproject\react\hello\node_modules\react-native\node_m odules\react-transform-hmr\node_modules\react-proxy\node_modules\react-deep-force-update.babelrc.stage

则可是因为新版本用的是babel 6版本,可是有些依赖的库并不是这个版本,就会导致这个错,所以解决方案就是把这个所以babel删了,升级依赖。

解决办法为删除项目下t\node_modules\react-deep-force-update\.babelrc 重新启动执行react-native start



PS:在因为网络问题不可以初始化文件的情况下可以下载其他人初始化成功的项目


三、安卓调试

打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。
在模拟器或真机菜单中选择Debug JS,即可开始调试。


四:配置搭建React Native 环境参考文章:


安装JDK
Java官网下载JDK并安装。请注意选择x86还是x64版本。
推荐将JDK的bin目录加入系统PATH环境变量。
安装AndroidSDK
可以单独安装AndroidSDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio,以下说明会默认以AndroidStudio的方式说明。请注意选择x86还是x64版本。
为了加速下载,推荐从
AndroidDevTools下载。
然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager),确保以下项目已经安装并更新到最新:

  • Tools/Android SDK Tools (24.3.3)
  • Tools/Android SDK Platform-tools (22)
  • Tools/Android SDK Build-tools (23.0.1)
  • Android 6.0 (API 23)/SDK Platform (1)
  • Extras/Android Support Library(23.0.1)
  • Extras/Android Support Repository
    推荐使用腾讯Bugly的镜像加速下载。
    查看说明
    推荐将SDK的platform-tools子目录加入系统PATH环境变量。
    安装C++环境
    推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。
    安装msysgit
    虽然不知道为什么init那一步需要用到这个东西,在这里下载安装。
    安装Python
    官网下载并安装python 2.7.x
    安装node.js
    官网下载node.js的官方4.1版本或更高版本。
    建议设置npm镜像以加速后面的过程(或使用科学上网工具)。
    npm config set registry https://registry.npm.taobao.org

    npm config 
    set disturl https://npm.taobao.org/dist

    安装react-native命令行工具
    npm install -g react-native-cli

    创建项目
    进入你的工作目录,运行
    react-native init MyProject

    并耐心等待数(或数十)分钟。
    0.14版本中带来了一个新的问题以至于在windows下引用图片不能成功(在0.15后修复),请参考
    这里进行对应修改以绕过此BUG。
    运行packager
    react-native start

    可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本。第一次访问通常需要十几秒,并且在packager的命令行可以看到进度条。
    如果你遇到了
    ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)
    运行模拟器
    推荐使用BlueStacks不过要小心它推送的广告和垃圾应用。
    如果有真机,可以不必运行模拟器,要配置好驱动,使得adb devices可以看到对应的设备。
    安卓运行
    保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行
    react-native run-android

    首次运行需要等待数分钟并从网上下载gradle依赖。
    运行完毕后可以在模拟器或真机上看到应用自动启动了。
    如果gradle依赖下载出现报错,请多试几次,或者设置VPN加速。
    如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。
    至此,应该能看到APP运行,并报错 Unable to download JS bundle
    摇晃设备或按Menu键(Bluestacks模拟器按键盘上的菜单键,通常在右Ctrl的左边 或者左Windows键旁边),可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的
    正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。
    如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。
    安卓调试
    打开Chrome,访问 http://localhost:8081/debugger-ui,应当能看到一个页面。按F12打开开发者菜单。
    在模拟器或真机菜单中选择Debug JS,即可开始调试。

React Native 开发

阅读数 17

React Native 安装开发环境

博文 来自: zhao__fang
没有更多推荐了,返回首页