关于学习RN和微信小程序一个月随感(上)

最新推荐文章于 2024-05-16 16:10:25 发布

龙逝寒

最新推荐文章于 2024-05-16 16:10:25 发布

阅读量3.6k

点赞数

分类专栏： Android 文章标签： android 微信

本文链接：https://blog.csdn.net/u012930328/article/details/53158017

版权

Android 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

2016.10-11.14是我学习（业余时间）RN和微信小程序一个月了，学了一些控件和事件。现在在这里做一下整理和总结。

一、React Native的实现和相关问题的解决

React Native的安装

React Native 是FaceBook去年推出的移动端通用代码的一套解决方案。总得来说，在目前为止是比较完善的。但官方的一些Demo是向IOS开发的，Android平台运行时比较麻烦的。Github地址，官方有专门的人进行维护，而且更新的速度很快。Demo也在里面。

首先提到React Native，肯定首先提到JSX语法，是一种构造虚拟的DOM结构体,这是FaceBook团队开发。JSX可以把Html的标签直接编写JavaScript对象，使用的是Xml-like语法，这种语法需要通过JSXTransformer翻译成真实可用的JavaScript代码。既然JSX是语法，肯定有其遵循的一套书写方案。在这里就不做赘述，需要了解的可以去百度。
在这里说一下需要注意的几点，否则在运行时会报错。

 1,React Native在导入其他模块时，在Component里面使用的对象的首字母大写。
 2,JSX只能执行一次运行结束的JavaScript语句（不清楚这样表述正不正确），所以像if-else这样的无法执行。
 3,JSX只能执行一个代码块，就是只能存在一个根节点。
 4，相关JSX的关键字和HTML的关键字冲突
注意以上四点就可以避开很多的坑。

其次，React Native运行的是ES6(或者兼容前代)的执行标准，如果小伙伴不了解ES6可以先去看相关的视频、书籍，毕竟ES6是下一代JavaScript的标准，与现阶段使用的JavaScript还是有不少区别的。
好了，介绍完前提的技术，现在可以进行React Native的Window下的安装了。
1，安装JDK,SDK，并写入环境变量中，安装git，Python（非必须，但这貌似是开发者的标配了）
2，官网上安装Node.js,官网，配置环境变量
3，安装react-native命令行工具，npm install -g react-native-cli

OK，其实就这两步，然后就可以在相关的文件夹中进行生产代码了。

react-native init MyProject

       这里需要等大约半个小时，，，网络好的话，小伙伴还可以使用代理，请百度。
       下载完成后在控制台会出现”react native android ”字样。这就说明下载成功。
目录：
这里写图片描述
       可以看出React Native 支持Android和IOS的操作，我们的操作的入口就是index.android.js，而IOS同理。
2. React Native的运行
        到了这个步骤，说明已经下载成功，上方的步骤已经完成。
        那么现在可以打开两个软件：Android Studio和Webstorm(使用Viual Studio Code也可)。
将Android项目（上图的android文件夹）导入到Android Studio中，最终图：
这里写图片描述
        在build.gradle中可以看出引用了

  compile "com.facebook.react:react-native:+"  // From node_modules

       在这个maven中有
这里写图片描述
       OK系列的网络请求框架，加载图片的fresco,还有支持react的jar文件。希望童鞋在使用添加ReactNative的时候勿要出现重复引用，模块重合。
       将整个文件夹导入Webstorm中，目录结构：

       在这里还要设置js的解析方式和运行方式，
这里写图片描述
       注意command设置为Start，就可以了。

       在这里要设置为JSX，才可以解析。
       你以为到这里就可以运行了？NO，工欲善其事必先利其器，我们还是先导入一个ReactNative的模板吧。
Github链接
直接下载下来，导入里面的ReactNative.jar文件就可以了，是WebStorm里面的Import Settings…..
接下来我们就可以愉快的玩耍了。
       首先将Android项目跑到手机上，（如果Gradle出现问题，检查下版本，是不是高于23.0.1，还有gradle的版本不要太新，我是1.3.1正常编译。现阶段的兼容性还是有问题的，出现问题的小伙伴可以在下方留言）
       然后WebStorm可以直接运行，在控制台可以看到npm start就说明已经在启动了。
看到React packager ready.就说明已经跑起来了，在浏览器中打开：

http://localhost:8081/index.android.bundle?platform=android

如果出现如下图的信息就说明正常启动，下一步就是修改软件的局域网地址。
这里写图片描述

如果网速不好，可以修改这里的设置网络延时时间，

const MAX_WAIT_TIME = 120000;

文件在
这里写图片描述
这个文件曾经改变过位置，直接百度的话，可能找不到路径，以最新的路径为准。
如果小伙伴的手机是小米手机，请在开发者选项里面将miui优化关闭，然后重启一下就可以了，软件刚安装有一个选项是在其他应用的上层显示，请选中。这样才能进入界面。

PS:如果现在才使用ReactNative的童鞋会发现，在init项目的时候会安装yarn，，，倒霉的npm管理器的迭代会直接影响我们构建的速度，没有办法，只好在npm中装在装一个yarn,安装方式相同，npm install -g yarn，（-g是全局安装，会直接安装在AppData/npm中），重新构建项目的时候会发现明显快了不少。

       软件刚进入一般都是红底黑字，这是ReactNative 的错误界面（就是这个特色）。
这里写图片描述
       打开Dev setting 设置电脑的IP和端口（比如192.168.0.100：8081等），前提必须在一个局域网中，重新reload一下，就可以看到界面。

       这是错误的界面（ps:局域网链接失败，可以cmd打开控制台输入ipconfig查看当前的局域网ip）
这里写图片描述
       我们会发现这个界面上的文字与index.android.js上书写的文字雷同，我们改变index.android.js上的文字，重新reload会发现界面也随之变化。我们可以得出一个结论，这个文件就是ReactNative的入口文件。

       到此，ReactNative的运行已经实现。

React Native与原生的调用
现在React Native已经可以跑起来了。大家可以愉快的玩耍了。上图就是界面布局，下图就是布局样式：

React Native遵循Flex布局方式，详情请看官方文档
对于一些控件的使用，可以参考官方文档，在这里需要注意一下，对于Android来说，官方文档可能更新有些慢，有一些被放弃的属性在官方文档上依然有体现。请注意Image控件，对于Android目录下mipmap和drawable目录下的图片必须保证正确引用，引用方式：
请注意{}在Component非常常见，比如加注释。
对于一般的操作以后的博客再讲，本次主要是将如果调用原生控件。
现在演示一下调用Toast控件。
1.首先我们了解到官方有一个管理toast的js库，

import Toast from 'react-native-root-toast';

写一个工具类实现Toast输出。
所以我们先安装一个库下载这个react-native-root-toast模块。使用npm安装

npm install react-native-root-toast

       如果在webstorm中没有找到这个支持包的话，也没关系，直接新建一个js文件,叫ToastUtil.js.直接导入这个包，软件会提示你安装，然后就安装好了。
这里写图片描述
       可以看出已经装好了。
       ToastUtil写法：

import Toast from 'react-native-root-toast';
export const toastShort = (content) => {
    if (toast !== undefined) {
        Toast.hide(toast);
    }
    toast = Toast.show(content.toString(), {
        duration: Toast.durations.SHORT,
        position: Toast.positions.CENTER,
        shadow: true,
        animation: true,
        hideOnPress: true,
        delay: 0
    });
};

这只是举个例子，文件在根目录，所以在index.android.js中导入：

import {toastShort} from 'ToastUtil'

点击事件弹出：

export default class yuansheng extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit index.android.js
                </Text>
                <Text style={styles.instructions}>
                    Shake or press menu button for dev menu test
                </Text>
                <TouchableOpacity onPress={()=> {
                    this.showtoast()
                }}>
                    <Text>Toast</Text>
                </TouchableOpacity>
            </View>
        );
    }

    showtoast() {
        toastShort("点击");
    }
}

       或者直接使用官方封装好的js文件，ToastAndroid。
ToastAndroid在react-native/Libraries/Components/中，通过下图可以看出：
这里写图片描述
       官方封装了很多了原生控件，以供使用，这也是新版更新过来的。
       使用ToastAndroid，

import * as ToastAndroid from "react-native/Libraries/Components/ToastAndroid/ToastAndroid.android";

 showtoast() {
        ToastAndroid.show('点击', ToastAndroid.SHORT);
    }

别忘了在import导入TouchableOpacity模块。
这样，就可以使用Toast功能了。

在新Android项目中打包React Native

比较关心的是在已有的项目打包使用ReactNative，通过上文可知ReactNative使用的是Bundle，将文件传到目录，解压显示（可能流程描述的不准确）。
所以我们可以通过对比和原有项目的联系。添加文件实现ReactNative功能。
1，配置node_modlues,我建议直接把存在的这个文件夹拷贝过去，因为下载速度，，稍微有点慢。放在和Android 项目同级，同时将package.json和index.android.js拷贝过去，这个版本文件和入口。修改package.json里面的内容，比如项目名称。
2，现在修改Android项目的文件，在项目的build.gradle添加ReactNative的仓库，

 url "$rootDir/../node_modules/react-native/android"

setting.gradle中添加

rootProject.name = 'yuansheng'//所在文件夹的名称

相关NDK的支持添加上
app的build.gradle中添加

 splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
     // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
compile "com.facebook.react:react-native:+"  // From node_modules

task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

设置代码：
在androidmanifast中添加：

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

Application要实现ReactApplication接口，

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

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

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