欢迎大家收看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应用啦~