[React Native Android 安利系列]原生小知識(建立activity並跳轉)

歡迎你們收看react-native-android系列教程，跟着本系列教程學習，能夠熟練掌握react-native-android的開發，你值得擁有
https://segmentfault.com/blog...

react-native畢竟也要有一些原生的知識，這裏咱們先學習一下原生android建立activity，並跳轉的過程。這有助於咱們的前端開發同窗，掌握一下android姿式。本實驗的view採用react進行渲染，也爲後續的學習作下鋪墊。若是已經有了相關知識的同窗，直接跳過便可。

1. android的activity跳轉(原生基礎小知識)

在咱們作js調用activity以前，先複習一下簡單的android開發的知識---兩個activity之間的跳轉。
對於沒有開發過android app的同窗來講，須要先了解一下android的基礎知識。android中有一個比較重要的組件--activity，是用於顯示View的。好比，咱們利用react建立的最簡單的app，當咱們一開始打開app的時候，其實就進入了一個主的activity，由其渲染咱們的主界面，在這裏，能夠簡單的理解activity爲瀏覽器中的一個tab(可能並不嚴謹，不過對前端開發同窗來講，可能更容易理解)。
兩個activity之間，能夠互相跳轉(就像瀏覽器中的tab能夠互相切換)，咱們來試試作兩個activity，並讓它們互相跳轉（就像看到頁面跳轉那樣的開心），這樣咱們就能更快的理解activity了。

1.1 新建activity

這裏，咱們利用以前構建的項目--helloReact來繼續咱們的旅途。
在這個項目中，咱們看到了一個已經存在的activity，就是咱們的主activity(如圖1.1.1)。

圖1.1.1
接下來，咱們新建一個activity，在com.hellowreact下(與MainActivity.java放在一塊兒便可)，右鍵點擊文件夾，並選擇new->java Class(圖1.1.2)

圖1.1.2
這裏咱們起名爲DetailActivity

圖1.1.3
代碼直接從MainActivity中複製過來便可，並將getMainComponentName的返回值略做修改，改成"detail"

package com.hellowreact;

import com.facebook.react.ReactActivity;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;

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

/**
 * Created by baidu on 16/6/8.
 */
public class DetailActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "detail";
    }

    /**
     * Returns whether dev mode should be enabled.
     * This enables e.g. the dev menu.
     */
    @Override
    protected boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
    }

    /**
     * A list of packages used by the app. If the app uses additional views
     * or modules besides the default ones, add more packages here.
     */
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
                new MainReactPackage()
        );
    }
}

1.2 註冊新的activity

請注意，咱們新建的activity須要在AndroidManifest.xml中進行註冊，AndroidManifest.xml位於app/manifests/下。

圖1.2.1
咱們打開AndroidManifest.xml，如圖，能夠看到其中已經有了一個叫MainActivity的activity

圖1.2.2
咱們在其中再添加一項，如圖1.2.3

<activity android:name=".DetailActivity" />

圖1.2.3

1.3 爲新的activity添加渲染的view

咱們有了新的activity，也就要添加一個渲染的view。打開項目中的index.android.js，新建一個react組件，並將其註冊

class detail extends Component {
    constructor(props) {
        super(props);
    }   

    render() {
        return <View>
            <Text>detail!!!</Text>
        </View>;
    }   
}
AppRegistry.registerComponent('detail', () => detail);

至此，咱們的view也有了。

1.4 先來看看咱們新作的activity

爲了早點看到效果，咱們先把新制做的activity做爲主要啓動的activity。只需改寫AndroidManifest.xml便可。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.hellowreact"
    android:versionCode="1"
    android:versionName="1.0">

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

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        <activity android:name=".DetailActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

咱們吧intent-filter從MainActivity中提出，並放到了DetailActivity中去。
讓咱們重裝一下應用，因而咱們就看到了新的activity，並看到了新增長的react組件渲染到了其上(如圖1.4.1)。

圖1.4.1

1.5 開始寫activity之間的跳轉

看過了新添加的activity以後，讓咱們先把AndroidManifest.xml給改回去。這樣咱們的啓動界面就又是咱們的列表啦(如圖1.5.1)

圖1.5.1
咱們在MainActivity中，添加對於onBackPressed的重寫(當返回鍵按下的時候)

public class MainActivity extends ReactActivity {

    @Override
    public void onBackPressed() {
        super.onBackPressed();
        Intent intent = new Intent(this, DetailActivity.class);
        startActivity(intent);
    }

    ........

當用戶，按下返回鍵的時候，跳轉到咱們的DetailActivity中去。
從新Run一下app，咱們看到了列表頁，點擊返回按鈕的時候(如圖1.5.2)，咱們看到跳轉到了DetailActivity裏面去，大功告成(如圖1.5.3)

圖1.5.2

圖1.5.3

怎麼樣，是否是和頁面跳轉同樣簡單呢？

本文中相關例子，能夠在此找到：
https://github.com/houyu01/re...

既然瞭解了原生知識，咱們下一節將利用本節學到的原生知識，使用js去調用。這樣雙劍合璧，即可以更加高效的開發react-native應用啦~