iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

從0到100打造一個React Native boilerplate系列 第 28

Day 28 / Other -- Android Structure

Android Structure

<好讀版>

前言

提完了 iOS 的架構,接下來就要提 Android 的部分囉。設定 Android 時,相比 iOS 起來,稍微方便一些。讓我們看下去。

架構

Android 的檔案架構大致如下:

/android
	/.gradle
	/app
		/build
		/src
			/assets
			/main
				/java/com/deeperience/
					MainActivity.java
					MainApplication.java
		build.gradle
	/gradle
	/keystores

其中對我們來說,較為重要的是 /app/keystores。因為前者記錄著我們使用的 library,而後者放著我們的 keystore ,是為了 deploy 用的。

那麼我們就直接來看看如何引入一個呼叫 Android 原生 API 的 react native library 吧!

第一步和第二步:

MainApplication.java:

package com.deeperience;

import android.app.Application;
import android.util.Log;

// 這邊是 import 我們所有會用到的 library (第一步)

import com.facebook.react.ReactApplication;
import com.burnweb.rnsimplealertdialog.RNSimpleAlertDialogPackage;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.magus.fblogin.FacebookLoginPackage;
import com.oblador.vectoricons.VectorIconsPackage;
import com.burnweb.rnsimplealertdialog.RNSimpleAlertDialogPackage;
import com.i18n.reactnativei18n.ReactNativeI18n;

import java.util.Arrays;
import java.util.List;


public class MainApplication extends Application implements ReactApplication {

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

   // 把所有要用的 package 塞在這裡 (第二步)
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
                                         new MainReactPackage(), 
                                         new RNSimpleAlertDialogPackage(),
                                         new VectorIconsPackage(),
                                         new ReactNativeI18n(),
                                         new FacebookLoginPackage()
                                         );
    }
  };

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

接著還有第三步,看到 /android/app/build.gradle,注意,有兩個 build.gradle

.....
dependencies {
	// 有一些 library 會需要在這邊也加上。
    compile project(':react-native-simpledialog-android')

    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules

    compile project(':react-native-vector-icons')
    compile project(':react-native-i18n')
    compile project(':react-native-facebook-login')
}
.....

到這裡就大功告成了,不過一樣,其實使用 react-native link 就可以解決了。然而,了解這些的話,我們在之後有遇到奇怪問題的時候就可以有工具解決囉!


上一篇
Day 27 / Other -- iOS Structure
下一篇
Day 29 / Other -- Deploy
系列文
從0到100打造一個React Native boilerplate30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言