React Native
文章平均质量分 55
ITKEY_
I Can Make IT!
展开
-
React Native Webview安全问题解决办法
威胁描述 根据CVE披露的WebView远程代码执行漏洞信息(CVE-2012-663、CVE-2014-7224),Android系统中存在一共三个有远程代码执行漏洞的隐藏接口。分别是位于android/webkit/webview中的“searchBoxJavaBridge”接口、android/webkit/AccessibilityInjector.java中的“accessibility”接口和“accessibilityTraversal”接口。调用此三个接口的APP在开启辅助功能选项中第三方原创 2022-03-19 20:53:53 · 3308 阅读 · 0 评论 -
xcode Archive菜单是灰色的解决办法
想把iOS应用打包上传到App Store发现这个菜单是灰色的。原因后来发现,因为我当前的运行环境是iOS模拟器。解决办法运行设备修改成Any iOS Device(arm64),菜单就可以正常使用了。参考https://ephrain.net/iphone-xcode-%E7%9A%84%E5%B0%81%E5%AD%98-archive-%E5%8A%9F%E8%83%BD%E8%AE%8A%E6%88%90%E7%81%B0%E8%89%B2%E4%B8%8D%E8%83%BD%E.原创 2022-02-20 20:05:50 · 4203 阅读 · 1 评论 -
【视频】iOS开发允许http请求
APP开发中有时会对接一些比较老的项目,老的项目还有一些在使用http的。iOS应用默认情况下不允许请求http,怎么能让其允许呢?修改Info.plist配置文件新增下面条目KeyTypeValueAllow Arbitrary LoadsBooleanYES源码形式如下:下面两行是关键部分<key>Allow Arbitrary Loads</key><true/>结构如下:<?xml version="1.0原创 2022-02-18 14:59:32 · 3026 阅读 · 0 评论 -
React Native打包安卓应用笔记
前言大部分内容是复制过来的,主要做了一下整理,方便自己查阅。打包发布Android 要求所有应用都有一个数字签名才会被允许安装在用户手机上,所以在把应用发布到应用市场之前,你需要先生成一个签名的 AAB 或 APK 包(Google Play 现在要求 AAB 格式,而国内的应用市场目前仅支持 APK 格式。但无论哪种格式,下面的签名步骤是一样的)。Android 开发者官网上的如何给你的应用签名文档描述了签名的细节。本指南旨在提供一个简化的签名和打包的操作步骤,不会涉及太多理论。生成一个签名密钥#原创 2022-02-11 23:30:00 · 1261 阅读 · 0 评论 -
Android Emulator安卓模拟器去黑边
安卓模拟器默认会有一个黑边,让它看起来像个手机。但是看久了总感觉太占地方了。去掉黑边重启完成以后,效果如下:原创 2022-02-10 23:30:00 · 2150 阅读 · 0 评论 -
React Native android 8以上版本闪退踩坑笔记
背景我的android的测试机版本是android 8,我使用React Native开发的应用,自己测试是正常的。iOS上也是正常的。但是一放到android8以上的版本本就出现了闪退的现象,让我非常的苦恼。本文就简单的总结一下,给遇到相同情况的朋友避坑。探索过程探索过程是及其痛苦,代码一点点注释。最终找到了两种可以导致Android 8以上版本闪退的情况。WebView隐藏导致闪退React Navigation 嵌套过多,从子叶跳转祖叶会导致闪退。而且这两种基本是在Android8原创 2021-12-26 12:12:45 · 3165 阅读 · 0 评论 -
React Native倒计时
代码import * as React from 'react';import {View, StyleSheet, Text} from 'react-native';export default function CountScreen() { const [count, setCount] = React.useState(100); const latestCount = React.useRef(count); // 定义一个ref,初始值是count React.useEf.原创 2021-12-26 09:53:05 · 1079 阅读 · 0 评论 -
React Native创建一个新的项目常用命令
创建项目创建一个typescript项目npx react-native init ywh --template react-native-template-typescript导入库整合方便一键安装,以下仅是本人常用的组件,可以按需增减yarn add react-native-webview @react-native-async-storage/async-storage react-native-animatable react-native-paper react-native-ro原创 2021-12-10 11:43:06 · 840 阅读 · 0 评论 -
ERROR Error: Reanimated 2 failed to create a worklet
报错To reload the app press "r"To open developer menu press "d" BUNDLE ./index.js ERROR Error: Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?, js engine: hermes ERROR Invariant Violation: Module AppRegi原创 2021-12-10 11:11:56 · 2749 阅读 · 0 评论 -
yarn使用说明
yarn优点速度超快。Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。超级安全。在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。超级可靠。使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。使用Yarn 提供了一组丰富的命令行命令来帮助您处理 Yarn 包的各个方面,包括安装、管理、发布等。虽然这里提供了所有可用的命令,但按字母顺序排列,一些更流行的命令是:yarn ad原创 2021-12-09 20:45:00 · 686 阅读 · 0 评论 -
Ant Design for React Native精简笔记
背景Ant Design是一套不错的UI组件库,功能强大。但是依赖了很多其他的组件,在RN6.3以后要自己安装以下组件才能正常使用。yarn add @react-native-community/cameraroll @react-native-community/picker @react-native-community/segmented-control @react-native-community/slider @react-native-community/viewpager @react原创 2021-12-09 11:58:42 · 2458 阅读 · 0 评论 -
React Native项目gradle手动编译
最近在折腾,远程开发React Native 项目,我想实现在ssh命令行中。在服务器上自动编译RN 项目(android),这样就可以使用高速的服务器来编译项目。正解cd android到工程目录后,执行以下命令即可完成debug 的apk生成。gradlew assembleDebug以下要探索过程,仅供参考。查任务列表cd /project/android执行以下命令,获取可执行的任务列表gradlew tasks查询结果如下(部分): android ./gradlew原创 2021-11-26 23:45:00 · 1856 阅读 · 0 评论 -
ReactNative AsyncLocalStorageUtil is defined multiple times
ios运行正常,在android下运行报错如下 :AS 编译报错Type com.reactnativecommunity.asyncstorage.AsyncLocalStorageUtil is defined multiple times: /home/apex/AndroidStudioProjects/ywh/node_modules/@react-native-async-storage/async-storage/android/build/.transforms/1ecb25a84335原创 2021-11-25 23:30:00 · 2461 阅读 · 0 评论 -
React Navigation中使用typescript简洁演示代码
最近在尝试转到typescript,之前代码中含有的大量{navigaiton}:any近期打算把这样的代码优化一下。参考以下文档:https://reactnavigation.org/docs/typescript尽量让代码精简,形成了以下代码。希望对大家有用。演示代码把以下代码保存成App.tsx就可以看到效果了。import * as React from "react";import { Button, View, Text, StyleSheet } from "react-nat原创 2021-11-23 16:35:33 · 1928 阅读 · 2 评论 -
WARN Found screens with the same name nested inside one another.
警告信息WARN Found screens with the same name nested inside one another. Check:DrawerNavigator > MainTabNavigator > ServiceScreen, DrawerNavigator > MainTabNavigator > ServiceScreen > ServiceScreenThis can cause confusing behavior during nav原创 2021-10-30 08:35:45 · 766 阅读 · 0 评论 -
React Native duplicate symbols for architecture x86_64
报错信息/Users/itkey/Library/Developer/Xcode/DerivedData/ywh-ggctvlciyanthueovxlwtkygqwha/Build/Products/Debug-iphonesimulator/react-native-viewpager/libreact-native-viewpager.a(ReactViewPagerManager.o)ld: 39 duplicate symbols for architecture x86_64详细报错信息原创 2021-10-27 11:22:12 · 876 阅读 · 0 评论 -
Termux配置neovim IDE
之前玩Termux基本就是通过proot-distro来安装Linux发行版本,然后在发行版本中在配置neovim环境。这样比较简单一些,遇到问题也可以直接网上搜索对应发行版本的解决办法就可以了。今天挑战一下直接在Termux的环境中搭建neovim开发react 的环境。文章目录相关阅读Termux使国内的源安装所需要软件安装python3支持的neovimpip3国内源加速(可选)安装pynvimnodejs切换taobao源(可选)搭建nvim + react开发环境总结相关阅读《andro原创 2021-09-02 18:37:57 · 3587 阅读 · 3 评论 -
expo中使用react navigation 6.x笔记
新版本react navigation 6.x,与5.x有什么区别呢?记个笔记吧!环境条目版本expo-cli4.10.0React Navigation6.x笔记日期2021年8月21日react navigation 6.x官方文档https://reactnavigation.org/docs/getting-started/expo官方文档https://docs.expo.dev/index.html安装依赖最近越来越喜欢yar原创 2021-08-21 20:57:51 · 1016 阅读 · 0 评论 -
expo cli升级后无法iOS模拟器调试Request failed with status code 400
国内expo的教程和文档相对比较少,记录下过程方便一下遇到相同问题的朋友们。现象expo初次安装使用正常,当升级expo cli到最新版本后,无法正常使用iOS模拟器调试了。开启调试报错如下:› Opening on iOS…› Opening exp://127.0.0.1:19000 on iPhone 12This download is taking longer than expected. You can also try downloading the clients from th原创 2021-08-18 21:14:24 · 896 阅读 · 0 评论 -
RN中的Alert
iOS中:Android中:代码import {Alert} from 'react-native';Alert.alert( "更新提醒", "My Alert Msg", [ { text: "取消", onPress: () => console.log("Cancel Pressed"), style: "cancel" }, {text: "确定", on原创 2021-07-07 17:24:24 · 501 阅读 · 1 评论 -
React Native每次进入页面执行一次方法
问:有什么办法 可以在我每次进入页面的时候 执行一次方法吗 因为我看rn的生命周期 都是只执行一次 然后在下次进入的时候就不会再执行方法了答:在function组件中可以这样实现:import {useFocusEffect} from '@react-navigation/native'; const ServiceScreen = ({navigation}) => { useFocusEffect(React.useCallback(() => { console原创 2021-07-07 17:05:34 · 3790 阅读 · 0 评论 -
Expo开发的App如果获取版本信息
如何获取版本信息,实际上很简单。但是我第一次使用expo获取版本信息,还是查看了好多expo的文档才找到。所以就记录一下吧。版本信息配置app.json{ "expo": { "name": "hello", "slug": "jsjs", "version": "1.0.0", "orientation": "portrait", "icon": "./assets/icon.png", ...略 }}这里的version字段就是对应的版本信息查询版本安装组件原创 2021-07-07 16:22:41 · 752 阅读 · 0 评论 -
Expo开发Field: splash.image - cannot access file at ‘./assets/splash.png‘
报错信息Error: Problems validating asset fields in app.json. Learn more: https://docs.expo.io/ • Field: splash.image - cannot access file at './assets/splash.png'. Running application on iPhone 12.原因分析./assets/splash.png文件权限出了问题,splash.png文件由root用户复制到项目原创 2021-07-07 15:46:01 · 226 阅读 · 0 评论 -
Unable to resolve module react-native-pager-view
报错信息Unable to resolve module react-native-pager-view from /home/apex/.wp/expo/jsjs/node_modules/@ant-design/react-native/lib/carousel/index.js: react-native-pager-view could not be found within the project.If you are sure the module exists, try these ste原创 2021-07-02 11:18:40 · 1723 阅读 · 1 评论 -
React Native 兼容ios与android的弹出提示toast
由于 iOS 没有内置的 toast 功能,因此 React Native 开发人员必须实现自己的跨平台 toast 库。react-native-root-toast是开发人员与 React Native 社区共享的一种解决方案。我们推荐此解决方案,因为它是最常用和维护最多的开源库之一,无需本机代码即可在 iOS 和 Android上运行。它还提供了许多自定义选项,这意味着您将能够将 Toast 的设计与应用程序的其余部分相匹配。用法要使用react-native-root-toast..原创 2021-06-30 10:53:37 · 1010 阅读 · 1 评论 -
react native中使用base64加密解密
使用方法考虑使用与和兼容的base-64,在 react 和 react native 中对我有用:btoaatobnpm install base-64 --save或者使用yarnyarn add base-64import {decode as base64_decode, encode as base64_encode} from 'base-64';let encoded = base64_encode('YOUR_DECODED_STRING');let decoded = b原创 2021-06-24 09:55:10 · 2620 阅读 · 0 评论 -
RN常用组件安装命令
文章目录Expo篇WebViewAsyncStoragereact-native-animatableReact Nativereact-native-animatableExpo篇WebViewreact-native-webview提供WebView在本机视图中呈现 Web 内容的组件。expo install react-native-webviewhttps://docs.expo.io/versions/latest/sdk/webview/AsyncStorage一个异步的、未加原创 2021-06-11 14:41:28 · 367 阅读 · 1 评论 -
typescript错误检查Property ‘navigation‘ is missing in type ‘{}‘
最近刚把一些react native 的项目转到typescript,一个typescript的菜鸟。我的过程仅供参考,不一定是最好的解决办法。遇到问题如下:错误信息[tsserver 2741] [E] Property 'navigation' is missing in type '{}' but required in type '{ navigation: any; }'.虽然程序可以正常运行的,有个错误还是很不舒服。解决办法RootStackScreen.tsx内容修改如下,就原创 2021-06-11 11:52:13 · 2196 阅读 · 0 评论 -
RN开发iOS模拟器按⌃⌘Z没反应?
在RN开发中Reload还是比较常用的,小伙伴有没有遇到按快捷键没有反应的情况?但是鼠标点击有用。鼠标点击就很不方便,如何解决呢?快捷键没反应,于是我就怀疑是不是快捷键冲突了?在系统设置中找了半天也没发现有冲突的。后来发现原来是QQ的快捷键冲突啦!QQ的装机率不用我说啦。解决办法删除或者修改QQ的⌃⌘Z快捷键。我把这个删除后,问题解决!...原创 2021-06-08 10:48:04 · 249 阅读 · 0 评论 -
macOS手动启动 Simulator(ios模拟器)
使用expo做RN开发,有时需要启动Simulator来做调试。毕竟直接在电脑看,比低头看真机舒服一些。我平时会使用xcode打开模拟器,然后在手动打开expo。本身打开xcode就要等待。能不能直接命令行启动模拟器呢?那么它来了!启动模拟器xcrun simctl boot 3F09B03A-78A3-4207-B30F-7674EB02F131最后面一长串是$UUID可以通过以下命令获取到。xcrun simctl list...原创 2021-06-08 10:37:01 · 7075 阅读 · 0 评论 -
【挑战】手机Termux搭建React Native开发环境
我这里选用alpine来做开发环境,主要因为它体积小巧,方便移植和分享。如果只是我自己使用的话,我更喜欢使用ubuntu或者archlinux。alpine做开发环境,可能会遇到的问题就是中文语言环境的问题了吧。等遇到这样的问题在想办法解决吧!TermuxTermux是一个Android终端模拟器和Linux环境应用程序,可直接运行而无root安装。自动安装了最小的基本系统-使用APT软件包管理器可以使用其他软件包。安全的。 使用OpenSSH的ssh客户端访问远程服务器。Termux在漂亮的开源解.原创 2021-06-03 22:32:31 · 1353 阅读 · 4 评论 -
React Native天气预报APP
expo扫码运行或者复制下面地址。exp://exp.host/@lxyoucan/weather-ts效果展示同时显示多个城市的天气情况,并按温度进行排序点击任何一个城市,显示天气详情信息项目地址https://github.com/lxyoucan/weather如何运行代码安装expo-clinpm install --global expo-cli运行cd weather#首次需要安装依赖,以后就不需要了yarn installyarn start.原创 2021-06-01 08:19:39 · 319 阅读 · 0 评论 -
RN踩坑this.setState未生效
出错代码目标是修改this.state.citys为初始化城市,但是发现并没有初始化成功!this.setState({ citys: [...initCityList] });console.log(this.state.citys);日志打印的还是未初始化的数据原因分析this.setState()是异步方法,也就是说,setState还没有执行完成,日志打印方法已经触发了,导致以为没有正确初始化。需要在回调中调用打原创 2021-05-26 11:52:25 · 1461 阅读 · 0 评论 -
RN踩坑‘await‘ expressions are only allowed within async functions and at the top levels of modules.
以前很少在循环中执行ajax,今天突然遇到个场景用到。习惯使用map来遍历了,结果在map中遍历无法使用await方法。一时有点懵!!!后来发现普通的for循环中可以遍历。虽然不清楚为什么,但是问题总算是解决了。错误信息'await' expressions are only allowed within async functions and at the top levels of modules.错误代码this.state.citys.map((item)=>{ a原创 2021-05-25 15:11:32 · 10879 阅读 · 4 评论 -
vim中jsx语法高亮
没安装高亮插件前安装插件vim-jsx-pretty(卡顿)安装插件Plug 'yuezk/vim-js'Plug 'maxmellon/vim-jsx-pretty'效果:如图所示,语法高亮后,确实好看了不少。随着我这段时间的使用,发现了一个让我非常难受的问题。在编辑JSX这段代码的时候,发现按回车换行非常的卡顿。甚至卡到我无法忍受。编辑非JSX部分,按回车是不会卡顿的。我排查了下,发现就是这个插件导致的。所以我暂时就把这个插件先禁用了。我宁愿不要高亮显示,也不想卡顿。vim原创 2021-05-20 22:08:19 · 424 阅读 · 0 评论 -
vim自动关闭标签
一行代码搞定inoremap <buffer> <C-s> <esc>yiwi<lt><esc>ea></><esc>hpF>i参考:https://www.reddit.com/r/vim/comments/gu5nm0/automatically_close_jsx_tags/插件搞定https://github.com/alvan/vim-closetag我在html中测试正常使用,但是在*.原创 2021-05-20 22:08:28 · 464 阅读 · 0 评论 -
Error: ENOSPC: System limit for number of file watchers reached
RN开发使用expo创建项目遇到如下错误:Error: ENOSPC: System limit for number of file watchers reached解决问题方法https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached/55763478#55763478该错误的意思是系统监视的文件数量已达到限制!!结原创 2021-05-13 09:24:42 · 5442 阅读 · 1 评论 -
vim中React JSX语法高亮插件vim-jsx-pretty
项目地址https://github.com/MaxMEllon/vim-jsx-pretty安装方法vim-plug为例,vimrc加入Plug 'yuezk/vim-js'Plug 'maxmellon/vim-jsx-pretty'执行安装命令:PlugInstall效果对比没有安装插件前:安装插件之后:总体来说效果还是非常明显的!...原创 2021-05-12 13:19:13 · 599 阅读 · 0 评论 -
Expo使用隧道穿透远程开发记录
expo启动项目默认是使用的端口是19000,而且expo自带一个免费的隧道穿透功能。但是这个免费的隧道穿透毕竟是国外的不稳定。既然官方都支持隧道穿透了,自定义隧道应该也是可以的吧!如何能稳定远程开发呢?我就在想自己搭建隧道吧!建立隧道目标:把本地的19000端口转发到外网地址。钉钉隧道(免费)用过的都说好,免费的甚至比收费的还稳还快!使用方法详细见:https://blog.csdn.net/lxyoucan/article/details/112548798这里就以钉钉隧道为例。nohu原创 2021-05-12 23:15:42 · 828 阅读 · 0 评论 -
React Native 学习笔记
iOS模拟器切换软键盘如果您使用的是iOS模拟器,则可以连接硬件键盘,并将其与任何输入字段。 这可以通过Shift +⌘+ K切换到软键盘。输入法键盘遮挡问题解决import {KeyboardAvoidingView} from 'react-native';//...略<KeyboardAvoidingView style={styles.container} behavior="padding">//...要自动滑动的View</KeyboardAvoidingVi原创 2021-05-09 21:25:22 · 281 阅读 · 0 评论