React Native学习笔记二之写个Hello World

最新推荐文章于 2024-04-29 00:06:35 发布
最新推荐文章于 2024-04-29 00:06:35 发布
阅读量656 收藏
点赞数
文章标签： android hello-world react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37168878/article/details/78392961
版权

第一篇blog介绍了配置开发RN的环境,在这个官方文档上我们可以了解到RN开发需要哪些工具，这些熟悉之后我们就可以进入实际项目开发了，不管我们现在懂不懂RN到底是个什么东西，有哪些它自己的语言或者开发要用到的API,我们统统不管，先进入项目开发，在开发中学习，在不断的掉坑中进步(^o^)/

前言

我们不学习怎么用RN开发应用程序，我们学习怎么在现有的android开发中加入RN进行混合开发。
其实这种方式，Facebook已经在其react-native项目的文档中进行了介绍，你可以直接通过—>这里<—的链接去访问这个文档；
这里写图片描述

如果这个链接不好找或者容易忘记的话，你也可以通过github上的—>react-native<—项目Getting Started栏目的Adding React Native to an Existing Application去查看这个文档
这里写图片描述

中文相关的文档可以查看这里集成到现有原生应用

1、首先当然要了解你要集成的React Native组件。
2、在Android项目根目录中使用npm来安装react-native ，这样同时会创建一个node_modules/的目录。
3、创建js文件，编写React Native组件的js代码。
4、在build.gradle文件中添加com.facebook.react:react-native:+，以及一个指向node_nodules/目录中的react-native预编译库的maven路径。
5、创建一个React Native专属的Activity，在其中再创建ReactRootView。
6、启动React Native的Packager服务，运行应用。
7、根据需要添加更多React Native的组件。
8、在真机上运行、调试。
9、打包。

引入相关的依赖

1、在app中bulid.gradle 添加依赖

新建一个项目（原生开发的方式），在app下的build.gradle中添加React Native 依赖。

compile "com.facebook.react:react-native:+"

然后sync一下， 出现一个错误，依赖冲突错误

这里写图片描述

2、解决依赖冲突

这里就要讲到gradle依赖中的冲突处理问题了，当我们有两个依赖关系依赖到了同一个库的不同版本会出现什么情况呢？

->如果两个依赖都在同一个配置中，都在app 或者 test app中，那么gradle能够自动解决冲突，这个库的这两个依赖中的最高版本会在构建中；

->但是，如果两个依赖在不同的配置中，就如上com.google.code.findbugs:jsr305在app中是3.0.0，但是在test app 中是2.0.1，gradle就会抛出一个错误，如上。

Android官方的文档的解释是

当运行测试时，主APK和测试APK共享相同的classpath，如果主APK和测试APK使用相同的库，但是在不同的版本时，Gradle将构建失败，如果gradle没有捕捉到，你的app在测试和正常云期间会表现不同的行为。

解决的方法也有两种：

1、你清楚是哪些库产生的冲突，这时你就可以决定排除哪个库上的依赖，如下

   //--热更新，防止重复依赖utdid
    compile ('com.aliyun.ams:alicloud-android-hotfix:3.1.0') {
        exclude(module:'alicloud-android-utdid')
    }

上面的代码就表示，项目在引用com.aliyun.ams:alicloud-android-hotfix:3.1.0库的时候，将排除module:'alicloud-android-utdid'。

2、第二种解决方法就是—强制库的解析
除了上面的每一个库都去修改外，我们还可以在gradle中加上全局配置的文件，强制所有配置使用同一个库

比如上面的引用com.google.code.findbugs:jsr305的冲突，我们就可以在gradle中加上如下代码，强制app和test app 都使用3.0.0的版本

configurations.all {  
    resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'  
}

现在我们再sync一下，发现没有错误了。

3、在项目中bulid.gradle 添加依赖

allprojects {
    repositories {
        ...
        maven {
            // All of React Native (JS, Android binaries) is installed from npm
            url "$rootDir/node_modules/react-native/android"
        }
    }
    ...
}

清单文件修改

在AndroidManifest.xml中加上如下权限

<uses-permission android:name="android.permission.INTERNET" />

在AndroidManifest.xml中加上DevSettingsActivity

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

添加index.android.js和package.json文件

1、在根目录下创建index.android.js文件

内容如下：

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);

2、在根目录下创建package.json文件

可以自己项目右键创建一个file（package.json），然后自己写入如下内容：

{
  "name": "rn1030",
  "version": "1.0.0",
  "description": "",
  "main": "index.android.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "zuo",
  "license": "ISC"
}

或者通过AS的命令行使用npm init命令创建
这里写图片描述

根据提示输入内容，就会生成 如下内容的`package.json`文件

{
  "name": "rn1030",
  "version": "1.0.0",
  "description": "",
  "main": "index.android.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "zuo",
  "license": "ISC"
}

然后我们把scripts下的内容换成"start": "node node_modules/react-native/local-cli/cli.js start"变成

{
  "name": "rn1030",
  "version": "1.0.0",
  "description": "",
  "main": "index.android.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "author": "zuo",
  "license": "ISC"
}

这些都是react-native文档中提到的，但是我们这里是根据自己的步骤来进行相关配置，并没有完全依据官方文档的步骤

修改MainActivity

需要注意android6.0之后的权限问题

官方文档说明：

如果您的应用需要在Android API23或更高版本运行，请确保您已为应用启用了覆盖权限， 您可以使用Settings.canDrawOverlays（this）来检查是否开启了覆盖权限。这在应用构建中是必需的，因为必须在所有其他窗口之上显示本机开发错误。 由于在API级别23中引入了新的权限系统，用户需要批准它。 这可以通过在onCreate（）方法中的Activity文件中添加以下代码来实现。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
    if (!Settings.canDrawOverlays(this)) {
        Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                                   Uri.parse("package:" + getPackageName()));
        startActivityForResult(intent, OVERLAY_PERMISSION_REQ_CODE);
    }
}

...

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    if (requestCode == OVERLAY_PERMISSION_REQ_CODE) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                // SYSTEM_ALERT_WINDOW permission not granted...
            }
        }
    }
}

修改之后的MainActivity如下

public class MainActivity extends BaseActivity  implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
    private final int ResultCODE = 1;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
//        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
          /* 下面的版本判断代码,如果不添加，在6.0以上的Android版本中会报错 */
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
            if (!Settings.canDrawOverlays(this)) {
                Intent intent = new Intent(Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
                        Uri.parse("package:" + getPackageName()));
                startActivityForResult(intent, ResultCODE);
            }
        }
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        //下面代码中的"MyReactNativeApp"来自index.android.js文件中最后一行代码
        mReactRootView.startReactApplication(mReactInstanceManager,
                "MyReactNativeApp", null);
        setContentView(mReactRootView);
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onDestroy();
        }
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        if (requestCode == ResultCODE) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
                if (!Settings.canDrawOverlays(this)) {
                    // SYSTEM_ALERT_WINDOW permission not granted...
                    Toast.makeText(this, "ACTION_MANAGE_OVERLAY_PERMISSION 权限获取失败！！", Toast.LENGTH_LONG).show();
                }
            }
        }
    }

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

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

    @Override
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
        }
        return super.onKeyUp(keyCode, event);
    }
}

添加node_modules

完成上面的步骤后，我们使用npm（node包管理器，Node package manager）来安装React和React Native模块，

打开一个终端/命令提示行，进入到项目目录中（即包含有package.json文件的目录），然后运行下列命令来安装，或者直接在Android studio 的Terminal中执行命令

npm install

这些模块会被安装到项目根目录下的node_modules/目录中（所有通过npm install命令安装的模块都会放在这个目录中。这个目录我们原则上不复制、不移动、不修改、不上传，随用随装）。

这里写图片描述

错误修改

使用npm start命令去运行这个包，再点击Android Studio界面上的运行按钮去运行项目，结果报错了
这里写图片描述

查看错误信息，应该是“\\”这样的字符识别不了，查看了下github上的解决方案，先在项目–>app–>main下新建一个assert文件夹，然后在根目录的命令行执行如下命令

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

可以查看assert目录下生产了三个文件
这里写图片描述

接着我们使用build下的clear project，清空一下项目，然后使用npm start命令去运行这个包，再点击Android Studio界面上的运行按钮去运行项目，结果可以运行也可以安装apk文件到手机上但是应用闪退，查看原因
这里写图片描述

这个错误的原因是React Native提供的libgnustl_shared.so文件是32位，而我们的项目中用了一些不兼容的64位so文件，二者混在一起产生的。

解决的办法就是禁止使用那些64位的so文件

第一，在项目根目录下的gradle.properties文件最后加上这样一句：

android.useDeprecatedNdk=true

第二、在app module下的build.gradle文件中添加如下内容：

android {
    ...
    defaultConfig {
        ...
        ndk{
            abiFilters "armeabi-v7a", "x86"
        }
        ...
    }
...
}

见证奇迹的时候到了！！！(^o^)/~
使用npm start命令去运行这个包，再点击Android Studio界面上的运行按钮去运行项目

这里写图片描述

运行出来的Hello World!

这里写图片描述

大功告成，写完收工！

沐左21
关注
专栏目录
React Native学习笔记三：使用组件引入方式写Hello World
九段刀客的博客
07-14 165
App.js const App = () => { return ( <View> <Header /> </View> ); }; export default App; Header.js import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; const Header = () => { return .
React Native入门——环境配置及Hello World
热门推荐
可爱的程序猿
01-06 1万+
最近React Native很火，这篇文章主要介绍如何快速创建一个RN应用，包含一些以后会用到的环境配置，适合希望初步了解React Native的读者，欢迎各位提出建议和问题！
React-native之 helloworld
正在Android的学习路上
03-25 1209
React-native之 helloworld
react-native的Hello_World
youngzhiyong
03-01 281
react-native的第一个hello world 1 需要安装nodejs这个环境，直接从网上下载就行 2 安装npm npm install -g nrm nrm use cnpm 3 创建react-native应用 react-native init FirstReactNative 4 启动服务 npm start 5 进入项目的目录，进入Androi
react native 之hello world
蒙的博客
11-13 1461
前言：前几天将react native开发需要的环境给搭建了起来，并且也初始化了一个react native 项目，这篇文章接着上个阶段，将细致的一步到位的简单的告诉对面的你怎么去将初始化的react native 项目在真机上跑起来，并且推开RN技术学习的大门，实现标志性的效果 hello world！！ 友情提示：以下流程的操作是基于我的windows电脑已经配置了java，安装了R
React Native入门-Hello World
qq_38930850的博客
09-18 184
基础条件：搭建好开发环境（详情见React Native官网）、模拟器（当前文章使用的是Genymotion模拟器） 实现： 1.通过命令行初始化React Native工程项目（react-native init Hello) 2.使用开发工具WebStorm开发工程项目，其工程目录结构如下所示： 3.项目入口为index.js，其指向为App.js，故对App.js文件进行修改。 rea...
React Native之React速学教程_不学react直接学react native可以吗
最新发布
2401_84447149的博客
04-29 597
每一个XML标签都会被JSX转换工具转换成纯JavaScript代码，使用JSX，组件的结构和组件之间的关系看上去更加清晰。JSX并不是React必须使用的，但React官方建议我们使用 JSX , 因为它能定义简洁且我们熟知的包含属性的树状结构语法。
React Native探索（一）环境搭建与Hello World（Windows/Mac）
Android进阶三部曲 - 刘望舒
05-02 4355
目前关于React Native的教程很多，官方文档写的也不错，但是感觉大部分教程写的不是很清楚，导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于React Native 0.43，只适用于用Windows平台的Android开发者。
React-Native学习笔记：组件与JSX语法解析
这个文档是作者在学习React-Native过程中整理的个人笔记，主要涵盖了React的基础语法和React-Native的一些核心概念。 #### React基础知识 React是一种用于构建用户界面的JavaScript库，它的核心理念是组件化。以下...
React Native v0.55 学习笔记1
mmrx的博客
06-02 881
React Native v0.55 学习笔记1 学习内容来自官网文档0.55版本 RN 是基于 React 的思想，相比于 web 的一些组件，RN 使用的是基于原生（ android、ios ）的组件。所以想用 RN 开发应用的话，就需要了解一些 React 方面的概念。例如 JSX，component，state 和 props。 Hello World RN 使用的是 J...
React-native 程序第一个HelloWorld的编写
wolfking0608的博客
06-04 2892
前提: 我上文提到的环境配置,如果都ok的话,即可进行以下编写:第一步: cmd 命令行输入:  react-native init RNDemo 回车  (备注:RNDemo 是自己随便给新程序命名,相当于Android Studio中的 New Project)  这个命令的目的,就是建立一个React native的新工程 ,等到cmd执行完毕,即可在cmd执行的目录下,看到新建的RNDem...
react-native 学习笔记
q2235141的博客
06-21 260
环境搭建：详情见官网 node、react-native-cli、python2、JDK1.8、AndroidStudio 一、准备工作 选择性安装组件 redux：统一状态管理 react-redux：提供provide、connect API，绑定react组件获取store redux-devtools：redux开发者工具，支持热加载、action重放、自定义UI等 redux-th...
ReactNative学习笔记
weixin_68658847的博客
10-04 1097
ReactNative学习笔记
ReactNative学习笔记一
weixin_44072887的博客
04-01 331
ES6声明变量的6中方法 var function let const import class onChangeText={()=>this.update(nextText)}语句可以写成 onChangeText={this.update} 不可以写成onChangeText={this.update(nextText)} 在RN开发中,开发者需要将状态机变量视为"不可变的常量...
React Native学习笔记之一
白汐月的IT专栏
07-05 1867
概述：React Native 是现在比较火的Android APP开发技术，由FaceBook推出的基于JSX开发的一个可以跨平台开发的框架。 Facebook在这个框架中提出了一个理念： Learn once, write anywhere 也是这个框架的优势所在。目前基于RN开发的APP有： 天猫iPad客户端，支付宝，携程网,Facebook Group，Chinese Flashcard
React Native版Hello World
托米每天美滋滋
10-26 5208
Hello World —— 一个好难的bug解决了，一个新的技术入门了，好像打开了新的世界，内心久久的不能平静，HelloWord由此诞生！ 最近公司不是很忙，我看React Native 最近比较火，中国的程序猿是什么技术好，就学习下，毕竟靠这行吃饭啊，这个不学习真的要被淘汰了，在中国搞开发还是比较累的，IT技术日新月异，我们要不断的学习，不断的积累，好了，收拾下心情，进入React Nat
React-Native学习笔记（一）——结构分析与视图案例
qq_41177361的博客
05-03 810
React Native 目录结构 小霞上手来一个新项目~，踏实搞明白结构和流程???? 一个新的 React Native 项目，根目录下的文件和目录结构如下 └── hello ├── App.js ├── __tests__ ├── android ├── app.json ├── babel.config.js ├── index.js ├── ios ├── m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值