欢迎大家收看react-native-android系列教程,跟着本系列教程学习,可以熟练掌握react-native-android的开发,你值得拥有:
https://segmentfault.com/blog...
书接上节,我们上节说道,如何控制原生android的activity间跳转,这次,我们试着用js去操控这个过程。
既然要使用js去调用java,那我们的第一步,当然是提供一个js可以调用的java接口了。
首先,照着上节的思路,我们将activity之间的跳转,封装成一个函数,放在MainActivity里面。如下:
public class MainActivity extends ReactActivity { public void skip() { Intent intent = new Intent(this, DetailActivity.class); startActivity(intent); } .... }
紧接着我们需要新建一个类(MyExtension)继承自ReactContextBaseJavaModule这个抽象类,之后我们新建的这个类,可以承载我们暴露给js的方法。让我们动手开始写这个类吧。
图1.2.1
图1.2.2
代码如下:
package com.hellowreact.extension; import android.content.Intent; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule; import com.facebook.react.bridge.ReactMethod; import com.hellowreact.DetailActivity; import com.hellowreact.MainActivity; /** * Created by baidu on 16/6/12. */ public class MyExtension extends ReactContextBaseJavaModule { public MyExtension(ReactApplicationContext reactContext) { super(reactContext); } @ReactMethod public void open() { MainActivity activity = (MainActivity) getCurrentActivity(); activity.skip(); } @Override public String getName() { return "MyExtension"; } }
这里有几个事项,注意一下:
我们写好了方法,接着我们就要注册了,我们还在extension的包里面,新建一个类(ExtensionPackage),代码如下:
package com.hellowreact.extension; import com.facebook.react.ReactPackage; import com.facebook.react.bridge.JavaScriptModule; import com.facebook.react.bridge.NativeModule; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.uimanager.ViewManager; import java.util.ArrayList; import java.util.Collections; import java.util.List; /** * Created by baidu on 16/6/12. */ public class ExtensionPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> modules = new ArrayList<>(); modules.add(new MyExtension(reactContext)); return modules; } @Override public List<Class<? extends JavaScriptModule>> createJSModules() { return Collections.emptyList(); } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } }
此时,我们的目录结构看起来应该是这样的,如图1.3.1
图1.3.1
接着,我们要在MainActivity中去注册我们写好的这个接口。
打开我们的MainActivity,其中有一个已经写好的方法 --- getPackages,如图1.4.1
图1.4.1
我们在其中,加入我们写好的接口(ExtensionPackage)
上述步骤完成之后,就意味着我们的接口已经导出了,接下来我们首先要验证一下。我们打开index.android.js并在require的模块中,增加一个NativeModules(如图2.1)
图2.1
NativeModules中存放着我们可以调用的native模块,还记得当时定义我们的扩展时,起的名字是什么吗?
图2.2
对!就是"MyExtension",既然已经注册好了,那么我们就在js中看看,是否已经有了呢?我们挑一个地方(本例中使用的是在constructor里)打印一下,看看是否已经有了呢(如图2.3)。
图2.3
我们使用debug js,在chrome中调起调试界面(如果还不会使用,我们接下来的章节里会详细讲解,跟着我看看变量即可,如图2.4):
图2.4
可以看下图2.5,我们成功的看到了当时我们导出的open函数:
图2.5
good!!!
上一步中,我们惊喜的看到我们在java中定义的open方法已经能在控制台看到了。接下来,我们在点击list的时候,去调用一下open方法:
class hellowReact extends Component { constructor(props) { console.log(NativeModules.MyExtension); super(props); var list = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); this.state = { list: list.cloneWithRows(['hello', 'react', 'this', 'is', 'my', 'listView']) }; } oneRow(oneItem) { return <Text>{oneItem}</Text>; } seeDetail() { NativeModules.MyExtension.open(); } render() { return ( <View style={styles.container}> <ListView dataSource={this.state.list} renderRow={this.oneRow} onTouchEnd={this.seeDetail} /> </View> ); } }
接着,我们重新运行一下,效果如图3.1与图3.2
图3.1
图3.2
于是乎,我们看到了运行的效果。下一章,我们会一起看看react-native中,js调用原生代码的原理。
本文中所用的例子,可以在这里找到:
https://github.com/houyu01/re...
下一节,我们将一起讨论一下,上述调用的RN底层原理,非常浅显易懂,不要错过:
原创文章,版权所有,转载请注明出处