如何在服务器里建设网站,做网站的分辨率是72吗,网页制作基础与实例教程,网站源码模块React Native在Android当中实践#xff08;一#xff09;——背景介绍 React Native在Android当中实践#xff08;二#xff09;——搭建开发环境 React Native在Android当中实践#xff08;三#xff09;——集成到Android项目当中 React Native在Android当中实践#…React Native在Android当中实践一——背景介绍 React Native在Android当中实践二——搭建开发环境 React Native在Android当中实践三——集成到Android项目当中 React Native在Android当中实践四——代码集成 React Native在Android当中实践五——常见问题 常见问题 若出现libgnustl_shared.so is 32-bit instead of 64-bit类似错误 这个问题是由于ReactNative兼容64位Android手机导致的。 解决办法: 1.在项目的根目录的 gradle.properties 里面添加一行代码 android.useDeprecatedNdktrue. 2.在 build.gradle 文件里添加以下代码 android {defaultConfig {ndk {abiFilters armeabi-v7a, x86}packagingOptions {exclude lib/arm64-v8a/librealm-jni.so}}
}
复制代码若出现react-native run-android Android project not found 出现这个问题主要是因为android项目的目录结构跟react-native支持的目录结构不一致导致的。 提示当然了你也可以运行“react-native upgrade”该命令运行之后你会发现你的android项目的目录结构变化了。 之后 在运行react-native run-android即可。 若出现Could not get BatchedBridge, make sure your bundle is packaged correctly 这是因为bundle没有打包好。找不到编译打包后的js文件。其实就是android studio默认的寻找js文件地址和react-native自己的工具编译所使用的地址不同。 若出现Could not connect to development server 首先 我们先翻译一下 连接不到开发的服务器。 请按照以下的步骤来修复此问题 确保包服务器在运行 确保你的设备或者模拟器连接着电脑并且手机打开了USB调试模式然后在cmd中运行adb devices来查看已经连接好的设备列表 确保飞行模式是关闭的 如果是使用真机来开发输入 adb reverse tcp:8081 tcp:8081来检查设备 输入IP8081这个大家都会 解决办法: 1、首先检查包服务器是否运行正常。 在项目文件夹下输入react-native start或者npm start均可开启服务器但是我们需要在PC端确认包服务器是否运行正常。检查网址为http://localhost:8081/index.android.bundle?platformandroid 1说说我遇到的问题开启包服务器之后cmd中显示如下 出现React packager ready就走不动了。 当我看开http://localhost:8081/index.android.bundle?platformandroid网址 时没有正常显示但是也没 有显示“该网页无法访问”只是一直在转圈圈刷新网页就是打不开。 包服务器中使用到了node所以应该和node版本和配置有一定的关系。所以我就卸掉 node重新安装了最新版本的node之后包服务器打开网页可以正常访问如下所示 2、检查硬件连接以及使用adb devices来查看是否连接成功。 3、飞行模式关闭 4、在cmd中输入 adb reverse tcp:8081 tcp:8081结果如下 个人认为解决办法如下 手机-设置-应用程序-开发-usb调试打开再关闭一次 重启手机usb调试打开再关闭一次 在cmd下Try adb kill-server and then adb start-server 本人测试机为android 5.0系统使用第二种方法解决问题。结果如下 5、摇一摇手机选择Dev Settings 输入IP8081。 Make sure your bundle is packaged correctly or yourre running a packager server 出现这个问题是由于 index.android.bundle是用来调用原生控件的js脚本每次当改变了 index.android.js都需要使用上面的代码片段来及时的更新index.android.bundle然后打包才可以把新的index.android.js应用上所以当没有index.android.bundle文件时React-Native 项目是无法运行的。 解决办法是 第一步在Android/app/src/main目录下创建一个空的assets文件夹若已经存在请忽略 出现这个问题是由于 index.android.bundle是用来调用原生控件的js脚本每次当改变了 index.android.js都需要使用上面的代码片段来及时的更新index.android.bundle然后打包才可以把新的index.android.js应用上所以当没有index.android.bundle文件时React-Native 项目是无法运行的。 解决办法是 第一步在Android/app/src/main目录下创建一个空的assets文件夹若已经存在请忽略 第二步在Android Studio的Terminal进入项目根目录执行下面代码 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res/ 运行完毕后可以看到如下表示已经成功了 同时在assets文件夹下会多出index.android.bundle和index.android.bundle.meta两个文件 如果已经有了资源文件但是依旧有以上提示那么对于真机来说摇晃手机会出现一些界面 选择最后一个 进入如下界面 输入本机的ip地址注意手机和电脑在一个局域网 别忘了加上端口号8081 如图 确认之后返回然后摇动打开调试页面选择 重新加载之后就会出现我们期盼已久的“Hello,World” React Native的开发者模式 会发现顶部有这样的一条 这是正在从网络加载相关内容当我们修改的时候内容也会有相应的修改。但是如果网络状况不太好的时候想必会对我们的用户体验造成不小的影响。 写在最后 从我个人用 React Native 开发 APP 的体验来看React Native 适合 C/S 结构、业务型的 APP 或其中的模块对于偏重底层技术的比如工具类 APP 或者模块我还没有使用 RN 尝试过不过想必显然是不太适合的。总的来说一个对于底层技术依赖不多业务型尤其是业务变动频繁的应用或模块适合 RN 开发而且一次开发基本可以完全重用于两个平台重要的是可以热更新来应对业务逻辑更新频繁、更新要求快、迅速修复线上 bug 等需求场景目前看RN 的热更新并没有被 Apple 封杀。 1. 无需编译我在第一次编译了ipa装好以后就再也没更新过app只要更新云端的js代码reload一下整个界面就全变了。 2. 多数布局代码都是JSX所有Native组件都是标签化的这对于前端程序员来说降低了不少学习成本也大大减少了代码量。不信你可以看看JSX编译后的代码。 3. 复用React系统也减少了一定学习和开发成本更重要的是利用了React里面的分层和diff机制。js层传给Native层的是一个diff后的json然后由Native将这个数据映射成真正的布局视图。 4. css-layout也是点睛之笔前端可以继续用熟悉的类css方式来编写布局通过这个工具转换成constrain布局。 5. 系统只有js-objc的单向调用就是把原生UI组件的方法通过javascritcore或者webview低版本iOS映射到js中来整个调用过程是异步的这样的设计令React native可以让js运行在桌面chrome中通过websocket连接Native code和桌面chrome极大地方便了调试。对其中的机制Bang的一篇文章写得很详细我就不拾人牙慧了React Native通信机制详解 « bang’s blog 。但这样设计也会带来一些问题后面说。 6. 点按操作也被抽象成了一组组件TouchableXXX这种抽象方式是我在之前做类似工作中没有想到的。facebook还列出Native为什么和web「手感」不同的原因实时的点按反馈和取消能力。React Native 这套相应机制设计得很完善能像Native code那样控制整个点按操作的所有过程。 7. Debug相当方便修改了js以后通过内建的nodejs watcher编译成bundle在模拟器里面按cmdr就可以看到效果。而且按cmdd可以打开一个chrome窗口所有的js都移到了chrome里面运行所以什么断点单步打调用栈都不在话下。 上面的既是特点也是优点下面说说缺点或者应该说「仍然遗留的问题」在我看来这个方案已经超越了Hybird方案。 1. 系统仍然不得不依赖原生组件暴露出来的组件和方法。举两个例子ScrollView这个组件在Native层是有大量事件的scrollViewWillBeginDragging scrollViewWillEndDraggingscrollViewDidEndDragging等等这些事件在现有的版本都没有暴露基本上做不了组件联动效果。另外这个版本中有大量组件是iOS only的ActivityIndicatorIOS、DatePickerIOS、NavigatorIOS、PickerIOS、SliderIOS、SwitchIOS、TabBarIOS、AlertIOS、AppStateIOS、LinkingIOS、PushNotificationIOS、StatusBarIOS、VibrationIOS反过来看剩余的都是一些抽象程度极强的基本组件。这样用户必须在不同的平台下写两套代码而且所有能力仍然强烈依赖 React native 开发人员暴露的接口。 2. 由于最外层是React初次学习成本高不像往常的Hybird方案只要多学几个JS API就可以开始干活了。当然React的确让后续开发变得简单了一些这么一套外来的基于iOS、残缺不全的css-layout在React的包装下的确显得不那么面目可憎了。 另外React Native仍然很不完善。文档还不全我基本上是看着他的示例代码完成的demo集成到已有app的文档也是今天才出来。按照官方的说法Android版本要到半年后才发布Blog | React 届时整个系统设计可能还会有很大的变化。 ######参考 www.zhihu.com/question/27… github.com/reactnative… www.lcode.org/category/re… 转载于:https://juejin.im/post/5bbd7139e51d450e8377b714
