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

  1. React Native的安装

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

 1. React Native在导入其他模块时,在Component里面使用的对象的首字母大写。
 2. JSX只能执行一次运行结束的JavaScript语句(不清楚这样表述正不正确),所以像ifelse这样的无法执行。
 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 android ”字样。这就说明下载成功。
目录:

       可以看出React Native 支持Android和IOS的操作,我们的操作的入口就是index.android.js,而IOS同理。

  1. React Native的运行
            到了这个步骤,说明已经下载成功,上方的步骤已经完成。
            那么现在可以打开两个软件:Android Studio和Webstorm(使用Viual Studio Code也可)。
    将Android项目(上图的android文件夹)导入到Android Studio中,最终图:

            在build.gradle中可以看出引用了

       在这个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.就说明已经跑起来了,在浏览器中打开:

       如果出现如下图的信息就说明正常启动,下一步就是修改软件的局域网地址。

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

文件在

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

       软件刚进入一般都是红底黑字,这是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遵循Flex布局方式,详情请看官方文档
对于一些控件的使用,可以参考官方文档,在这里需要注意一下,对于Android来说,官方文档可能更新有些慢,有一些被放弃的属性在官方文档上依然有体现。请注意Image控件,对于Android目录下mipmap和drawable目录下的图片必须保证正确引用,引用方式:

>
>

对于一般的操作以后的博客再讲,本次主要是将如果调用原生控件。
现在演示一下调用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功能了。

  1. 在新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;
  }

需要使用的入口是继承ReactActivity。
具体如何集成,我也没有找到能够100%一次性通过编译的,可能现阶段不完善吧。ReactNative的介绍先到一阶段。
原本想出一个微信小程序的,后来又不火了,就放弃了

原文:大专栏  关于学习RN和微信小程序一个月随感


02-12 00:52
查看更多