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

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.非死book.react.ReactActivity;
import com.非死book.react.ReactPackage;
import com.非死book.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.非死book.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應用啦~

系列文章

[React Native Android安利系列]搭建React Native Android環境 
[React Native Android安利系列]創建簡單 RN 應用(以js角度來看RN)
[React Native Android安利系列]原生小知識(創建activity并跳轉)

 

來自：https://segmentfault.com/a/1190000006082315