[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应用啦~