2024年React Native Android混合开发实战教程，安卓面试题pdf下载

2401_84538278

于 2024-05-15 03:58:21 发布

阅读量681

点赞数 13

分类专栏：程序员文章标签： android 面试学习

本文链接：https://blog.csdn.net/2401_84538278/article/details/138882780

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

最后

对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！

最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。

对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。

为了大家能够顺利进阶中高级、架构师，我特地为大家准备了一套高手学习的源码和框架视频等精品Android架构师教程，保证你学了以后保证薪资上升一个台阶。

以下是今天给大家分享的一些独家干货：

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

Platform,
StyleSheet,
Text,
View
} from ‘react-native’;

type Props = {};
export default class App extends Component {
render() {
return (

this is App

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
},
welcome: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
}
});

这个App.js文件代表了我们React Native的一个页面，在这个页面中显示了this is App的文本内容。

以上就是为本次演示所添加的React Native代码，你也可以根据需要添加更多的React Native代码以及组件出来。

4. 为React Native创建一个Activity来作为容器

经过上述3、4步，我们已经为RNHybridAndroid项目添加了React Native依赖，并且创建一些React Native代码和注册了一个名为App1的组件，接下来我们来学习下如何在RNHybridAndroid项目中使用这个App1组件。

创建RNPageActivity

首先我们需要创建一个Activity来作为React Native的容器，

public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName(“index.android.bundle”)
.setJSMainModulePath(“index”)
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 这个"App1"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
mReactRootView.startReactApplication(mReactInstanceManager, “App1”, null);

setContentView(mReactRootView);
}

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}

参数说明

setBundleAssetName：打包时放在assets目录下的JS bundle包的名字，App release之后会从该目录下加载JS bundle；
setJSMainModulePath：JS bundle中主入口的文件名，也就是我们上文中创建的那个index.js文件；
addPackage：向RN添加Native Moudle，在上述代码中我们添加了new MainReactPackage()这个是必须的，另外，如果我们创建一些其他的Native Moudle也需要通过addPackage的方式将其注册到RN中。需要指出的是RN除了这个方法外，也提供了一个addPackages方法用于批量向RN添加Native Moudle；
setUseDeveloperSupport：设置RN是否开启开发者模式(debugging，reload，dev memu)，比如我们常用开发者弹框；
setInitialLifecycleState：通过这个方法来设置RN初始化时所处的生命周期状态，一般设置成LifecycleState.RESUMED就行，和下文讲的Activity容器的生命周期状态关联；
mReactRootView.startReactApplication：它的第一个参数是mReactInstanceManager，第二个参数是我们在index.js中注册的组件的名字，第三个参数接受一个Bundle来作为RN初始化时传递给JS的初始化数据，它的具体用法我会在**React Android 混合开发讲解的视频教程**中再具体的讲解；

在中`AndroidManifest.xml`注册一个RNPageActivity

Android系统要求，每一个要打开的Activity都要在AndroidManifest.xml中进行注册：

上述代码中我们为RNPageActivity添加了一个@style/Theme.AppCompat.Light.NoActionBar类型的theme，这也是React Native UI组件所要求的主题。

为ReactInstanceManager添加Activity的生命周期回调

一个 ReactInstanceManager可以被多个activities或fragments共享，所以我们需要在Activity的生命周期中回调ReactInstanceManager的对于的方法。

@Override
protected void onPause() {
super.onPause();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause(this);
}
}

@Override
protected void onResume() {
super.onResume();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}

@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}

@Override
protected void onDestroy() {
super.onDestroy();

if (mReactInstanceManager != null) {
mReactInstanceManager.onHostDestroy(this);
}
if (mReactRootView != null) {
mReactRootView.unmountReactApplication();
}
}

从上述代码中你会发现有个不属于Activity生命周期中的方法onBackPressed，添加它的目的主要是为了当用户单击手机的返回键之后将事件传递给JS，如果JS消费了这个事件，Native就不再消费了，如果JS没有消费这个事件那么RN会回调invokeDefaultOnBackPressed代码。

@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}

此过程更细致的讲解可查阅：React Native与Android 混合开发讲解的视频教程

添加开发者菜单

在RN中有个很好用的工具开发者菜单，我们平时调试RN应用时对它的使用频率很高，接下来我们来为RNHybridAndroid添加开着菜单。

通过上代码即可监听Ctrl + M来打开RN开发者菜单。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

另外，RN也提供了双击R来快速加载JS的功能，通过如下代码即可打开该功能：

public boolean onKeyUp(int keyCode, KeyEvent event) {
if (getUseDeveloperSupport()) {
if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
mReactInstanceManager.showDevOptionsDialog();
return true;
}
boolean didDoubleTapR = Assertions.assertNotNull(mDoubleTapReloadRecognizer).didDoubleTapR(keyCode, getCurrentFocus());
if (didDoubleTapR) {//双击R 重新加载JS
mReactInstanceManager.getDevSupportManager().handleReloadJS();
return true;
}
}
return super.onKeyUp(keyCode, event);
}

此过程更细致的讲解可查阅：React Native与Android 混合开发讲解的视频教程

使用ReactActivity来作为RN容器

在上述的代码中我们都是通过ReactInstanceManager来创建和加载JS的，然后重写了Activity的生命周期来对ReactInstanceManager进行回调，另外，重写了onKeyUp来启用开发者菜单等功能。

另外，查看RN的源码你会发现在RN sdk中有个叫ReactActivity的Activity，该Activity是RN官方封装的一个RN容器。另外，在通过react-native init命令初始化的一个项目中你会发现有个MainActivity是继承ReactActivity的，接下来我们就来继承ReactActivity来封装一个RN容器。

public class ReactPageActivity extends ReactActivity implements IJSBridge{
/**

Returns the name of the main component registered from JavaScript.
This is used to schedule rendering of the component.
*/
@Override
protected String getMainComponentName() {
return “App1”;
}
}

另外，我们需要实现一个MainApplication并添加如下代码：

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}

@Override
protected List getPackages() {
return Arrays.asList(
new MainReactPackage()
);
}

@Override
protected String getJSMainModuleName() {
return “index”;
}
};

@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}

@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
}

上述代码的主要作用是为ReactActivity提供ReactNativeHost，查看源码你会发现在ReactActivity中使用了ReactActivityDelegate，在ReactActivityDelegate中会用到MainApplication中提供的ReactNativeHost：

protected ReactNativeHost getReactNativeHost() {
return ((ReactApplication) getPlainActivity().getApplication()).getReactNativeHost();
}

另外实现了MainApplication之后需要在AndroidManifest.xml中添加MainApplication：

…

以上就是通过继承ReactActivity的方式来作为RN容器的。

那么这两种方式各有什么特点：

通过ReactInstanceManager的方式：灵活，可定制性强；
通过继承ReactActivity的方式：简单，可定制性差；

此过程更细致的讲解可查阅：React Native与Android 混合开发讲解的视频教程

5. 运行React Native

经过上述的步骤，我们已经完成了对一个现有Android项目RNHybridAndroid添加了RN，并且通过两种方式分别创建了一个RNPageActivity与ReactPageActivity的Activity来加载我们在JS中注册的名为App1的RN 组件。

接下来我们来启动RN服务器，运行RNHybridAndroid项目打开RNPageActivity或ReactPageActivity来查看效果：

npm start

在RNHybrid的根目录运行上述命令，来启动一个RN本地服务：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

然后我们打开AndroidStudio，点击运行按钮或者通过快捷键Ctrl+R来将RNHybridAndroid安装到模拟器上：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

6. 添加更多React Native的组件

我们可以根据需要添加更多的React Native的组件：

import { AppRegistry } from ‘react-native’;
import App from ‘./App’;
import App2 from ‘./App2’;

AppRegistry.registerComponent(‘App1’, () => App);
AppRegistry.registerComponent(‘App2’, () => App);

然后，在Native中根据需要加载指定名字的RN组件即可。

7. 调试、打包、发布应用

调试

调试这种混合的RN应用和调试一个纯RN应用时一样的，都是通过上文中说讲到的RN 开发者菜单，另外搭建也可以通过学习React Native技术精讲与高质量上线APP开发课程来掌握更多RN调试的技巧。

打包

虽让，通过上述步骤，我们将RN和我们的RNHybridAndroid项目做了融合，但打包RNHybridAndroid你会发现里面并不包含JS部分的代码，如果要将JS代码打包进Android Apk包中，可以通过如下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output RNHybridAndroid/app/src/main/assets/index.android.bundle --assets-dest RNHybridAndroid/app/src/main/res/

参数说明

最后

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。这和我们收集资料就要收集那些系统化的，是一个道理。

网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。希望这份系统化的技术体系对大家有一个方向参考。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

[外链图片转存中…(img-MFnc5679-1715716679030)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

2401_84538278

关注

13
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
2024年React Native Android混合开发实战教程，安卓面试题pdf下载

对于程序员来说，要学习的知识内容、技术有太多太多，要想不被环境淘汰就只有不断提升自己，从来都是我们去适应环境，而不是环境来适应我们！最后，我再重复一次，如果你想成为一个优秀的 Android 开发人员，请集中精力，对基础和重要的事情做深度研究。对于很多初中级Android工程师而言，想要提升技能，往往是自己摸索成长，不成体系的学习效果低效漫长且无助。整理的这些架构技术希望对Android开发的朋友们有所参考以及少走弯路，本文的重点是你有没有收获与成长，其余的都不重要，希望读者们能谨记这一点。
复制链接

扫一扫