一、React Native的实现和相关问题的解决
- 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同理。
- 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功能了。
- 在新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的介绍先到一阶段。
原本想出一个微信小程序的,后来又不火了,就放弃了