[React Native Android 安利系列]原生小知识(创建activity并跳转)

   <p>react-native毕竟也要有一些原生的知识，这里我们先学习一下原生android创建activity，并跳转的过程。这有助于我们的前端开发同学，掌握一下android姿势。本实验的view采用react进行渲染，也为后续的学习做下铺垫。如果已经有了相关知识的同学，直接跳过即可。</p>    <h2>1. android的activity跳转(原生基础小知识)</h2>    <p>在我们做js调用activity之前，先复习一下简单的android开发的知识---两个activity之间的跳转。</p>    <p>对于没有开发过android app的同学来说，需要先了解一下android的基础知识。android中有一个比较重要的组件--activity，是用于显示View的。比如，我们利用react创建的最简单的app，当我们一开始打开app的时候，其实就进入了一个主的activity，由其渲染我们的主界面，在这里，可以简单的理解activity为浏览器中的一个tab(可能并不严谨，不过对前端开发同学来说，可能更容易理解)。</p>    <p>两个activity之间，可以互相跳转(就像浏览器中的tab可以互相切换)，我们来试试做两个activity，并让它们互相跳转（就像看到页面跳转那样的开心），这样我们就能更快的理解activity了。</p>    <h3>1.1 新建activity</h3>    <p>这里，我们利用之前构建的项目--helloReact来继续我们的旅途。</p>    <p>在这个项目中，我们看到了一个已经存在的activity，就是我们的主activity(如图1.1.1)。</p>    <p><img src="https://simg.open-open.com/show/eb1043be7cf28c36478d551429e8f32a.png"></p>    <p>图1.1.1</p>    <p>接下来，我们新建一个activity，在com.hellowreact下(与MainActivity.java放在一起即可)，右键点击文件夹，并选择new->java Class(图1.1.2)</p>    <p><img src="https://simg.open-open.com/show/9f37da799eedf600c16d8ea8fc10fda4.png"></p>    <p>图1.1.2</p>    <p>这里我们起名为DetailActivity</p>    <p><img src="https://simg.open-open.com/show/07bc6bc0fa9d5a8bd45d9261c7c02785.png"></p>    <p>图1.1.3</p>    <p>代码直接从MainActivity中复制过来即可，并将getMainComponentName的返回值略作修改，改为"detail"</p>    <pre>  <code class="language-java">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()          );      }  }</code></pre>    <h3>1.2 注册新的activity</h3>    <p>请注意，我们新建的activity需要在AndroidManifest.xml中进行注册，AndroidManifest.xml位于app/manifests/下。</p>    <p><img src="https://simg.open-open.com/show/d6c22a2adef47f1ec0c08347990424b8.png"></p>    <p>图1.2.1</p>    <p>我们打开AndroidManifest.xml，如图，可以看到其中已经有了一个叫MainActivity的activity</p>    <p><img src="https://simg.open-open.com/show/5c2c61385f9f28f8c48fea9a39ae6e9e.png"></p>    <p>图1.2.2</p>    <p>我们在其中再添加一项，如图1.2.3</p>    <pre>  <code class="language-java"><activity android:name=".DetailActivity" /></code></pre>    <p><img src="https://simg.open-open.com/show/1eb2cd53b95f366d08975899867fc287.png"> 图1.2.3</p>    <h3>1.3 为新的activity添加渲染的view</h3>    <p>我们有了新的activity，也就要添加一个渲染的view。打开项目中的index.android.js，新建一个react组件，并将其注册</p>    <pre>  <code class="language-java">class detail extends Component {      constructor(props) {          super(props);      }           render() {          return <View>              <Text>detail!!!</Text>          </View>;      }     }  AppRegistry.registerComponent('detail', () => detail);</code></pre>    <p>至此，我们的view也有了。</p>    <h3>1.4 先来看看我们新做的activity</h3>    <p>为了早点看到效果，我们先把新制作的activity作为主要启动的activity。只需改写AndroidManifest.xml即可。</p>    <pre>  <code class="language-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></code></pre>    <p>我们吧intent-filter从MainActivity中提出，并放到了DetailActivity中去。</p>    <p>让我们重装一下应用，于是我们就看到了新的activity，并看到了新增加的react组件渲染到了其上(如图1.4.1)。</p>    <p><img src="https://simg.open-open.com/show/d60b20f666724b8f1123535e0fddd8dd.png"></p>    <p>图1.4.1</p>    <h3>1.5 开始写activity之间的跳转</h3>    <p>看过了新添加的activity之后，让我们先把AndroidManifest.xml给改回去。这样我们的启动界面就又是我们的列表啦(如图1.5.1)</p>    <p><img src="https://simg.open-open.com/show/99a3d5783af5e9699a8302a39dc1a5b7.png"></p>    <p>图1.5.1</p>    <p>我们在MainActivity中，添加对于onBackPressed的重写(当返回键按下的时候)</p>    <pre>  <code class="language-java">public class MainActivity extends ReactActivity {        @Override      public void onBackPressed() {          super.onBackPressed();          Intent intent = new Intent(this, DetailActivity.class);          startActivity(intent);      }        ........</code></pre>    <p>当用户，按下返回键的时候，跳转到我们的DetailActivity中去。</p>    <p>重新Run一下app，我们看到了列表页，点击返回按钮的时候(如图1.5.2)，我们看到跳转到了DetailActivity里面去，大功告成(如图1.5.3)</p>    <p><img src="https://simg.open-open.com/show/6ee0e828b7f61e670d34069bcd7e4984.png"></p>    <p>图1.5.2</p>    <p><img src="https://simg.open-open.com/show/5d1beb2615265ca826587c46b45ce38f.png"></p>    <p>图1.5.3</p>    <p>怎么样，是不是和页面跳转一样简单呢？</p>    <p>本文中相关例子，可以在此找到：</p>    <p><a href="/misc/goto?guid=4959675709548833137" rel="nofollow,noindex">https://github.com/houyu01/re...</a></p>    <p>既然了解了原生知识，我们下一节将利用本节学到的原生知识，使用js去调用。这样双剑合璧，便可以更加高效的开发react-native应用啦~</p>    <h2>系列文章</h2>    <p><a href="http://www.open-open.com/lib/view/open1469582136031.html">[React Native Android安利系列]搭建React Native Android环境</a> <br> <a href="http://www.open-open.com/lib/view/open1469582257548.html">[React Native Android安利系列]创建简单 RN 应用(以js角度来看RN)</a><br> [React Native Android安利系列]原生小知识(创建activity并跳转)</p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000006082315</p>    <p> </p>