rn专题
通过RN框架实现跳转到微信落地页
在使用 Expo 搭建的 React Native 应用中，要实现分享到微信后点击分享链接进入指定落地页，需要做如下几个步骤： 1. **创建分享链接**：当用户点击分享按钮时，生成一个特定的分享链接，该链接应该包含信息用于标识用户点击的是哪个内容或页面。 2. **设置落地页**：确保你有一个可以处理这个分享链接的落地页或路由。当用户点击链接时，应用能够识别并导航到相应的页面
console.log 在js、React Native (Rn)中的开关设计
为啥会写这个题目呢，也是来自于自己在开发场景转换时遇到一个性能优化点。因为我之前是做Android开发的，当时设计Log开关的时候，是去写一个LogUtils工具类，里面去重写Log类的各个方法，然后里面的关键代码 if (BuildConfig.DEBUG) {//todo} 因为在写Android代码时，用工具类LogUtils很方便，会自动提示 import，所以编码比较便捷。
Xcode9.3 React-Native(RN) build 打包报错
代码环境： RN: 0.44+ Xcode 9.3 打包时会报下面几种错误: /node_modules/react-native/Libraries/Image/RCTImageCache.m:28:55: Enum values with underlying type ‘NSInteger’ should not be used as format arguments; add an
RN组件库 - Button 组件
从零构建 React Native 组件库，作为一个前端er~谁不想拥有一个自己的组件库呢 1、定义 Button 基本类型 type.ts import type {StyleProp, TextStyle, ViewProps} from 'react-native';import type {TouchableOpacityProps} from '../TouchableOpacit
RN解析富文本内容的插件
安装插件 yarn add react-native-render-html 使用 import HTML from 'react-native-render-html';import {View} from 'react-native';export default function () {return (<View style={{flex: 1}}><HTMLsource={{
RN：Error: /xxx/android/gradlew exited with non-zero code: 1
问题 执行 yarn android 报错： 解决 这个大概率是缓存问题，我说一下我的解决思路 1、yarn doctor 2、根据黄色字体提示，说我包版本不对（但是这个是警告应该没事，但是我还是装了） npx expo install --check 3、清缓存 rm -rf android/app/.cxx android/.gradle android/.idea andr
使用RN的kitten框架的日历组件的修改
官方网页地址 下面就是我参考官方封装的时间日期组件（主要是功能和使用方法，页面粗略做了下，不好看勿怪） import React, {useState} from 'react';import {StyleSheet, View, TouchableOpacity, SafeAreaView} from 'react-native';import {Calendar, NativeDa
RN开发搬砖经验之—分析与定位图片文件被清空的原因
如题 最近工作上处理的一个BUG，先讲下结论/原因，然后再分享该主题相关的东西 结论是：copy图片文件时，源路径与目标路径相同—输入输出流同时操作同一个文件，导致文件清空了！ copy文件的主要源码如下，源代码链接是RNFSManager，JS层调最终调用到的Java方法 上下文 当前项目需要把应用cache目录下的文件copy至file目录下，然后由于历史代码的原因，导致产生了多次co
RN使用js让输入框取消和获取焦点(及键盘的监听)
1.自动获取焦点 <TextInputstyle={{width: 90,paddingLeft: 20,}}autoFocus={true} // 自动获取焦点onChangeText={text => setText(text)}value={text}/> 2.取消焦点 import React, { useRef } from 'react';import {TextInput
RN项目问题总结梳理
问题1 问题描述：TextInput组件在页面底部时，弹出键盘时遮挡TextInput组件，用户无法正常输入内容 分析解决：弹出键盘浮在页面布局之上占用了一部分布局控件，可以监听键盘的弹出和隐藏事件，实现动态调整页面布局。 //页面装载时componentWillMount() {//监听键盘弹出事件this.keyboardDidShowListener = Keyboard.addLis
重启电脑后，原先正常在手机上跑的RN项目出现报错：.......
重启电脑后，原先正常在手机上跑的RN项目，重新通过连接电脑后运行出现莫名其妙的报错，用了谷歌翻译后，说是内存空间不足。。。。。一脸闷逼，然后打开AS，尝试运行，依然相同的报错，然后查看了手机内存，只有300多M，在清除一些手机应用，腾出了一些空间后再运行，没有报错了。。。
RN在使用FlatList时报错missing key for items...
代码： import React, { Component } from 'react'//imrimport { FlatList, Text, StyleSheet } from 'react-native'//imrnexport default class flatlist extends Component {constructor(props){super(props);this.
RN在开发中遇到跳转页面时报错：Can't find variable: navigation
报错如下： 解决：在render函数内部添加： const { navigation } = this.props; 相关代码如下： Page1页面代码： import React, { Component } from 'react';import { Text, Button, View, StyleSheet } from 'react-native';export defau
ReactNative项目构建分析与思考之RN组件化
传统RN项目对比 ReactNative项目构建分析与思考之react-native-gradle-plugin ReactNative项目构建分析与思考之native_modules.gradle ReactNative项目构建分析与思考之 cli-config 在之前的文章中，已经对RN的默认项目有了一个详细的分析，下面我们来看一下如何在已有项目中集成RN。 官方给了一个详细的文档，
RN navigation 调用外部的函数
由于刚接触rn不久，也写了一些页面，但是之后写的页面点击返回键的时候都是直接退出页面，没有和外部的页面交互，昨天写的这个页面是和外部进行了交互调用，再次记录一下 1. static navigationOptions = ({ navigation }) => { return { headerTitle: 'title', backOptions: {
RN开发搬砖经验之—在React 函数式组件别一把梭useState得考虑下useRef
最近在fix一些bug中，发现在函数式组件中不区别场景，任何函数式组件中的变量都是使用useState，然后没有考虑到useState是异步更新值的，导致各种离奇的BUG出现！另外看到相关代码中出现大量的setTimeout操作，估计想用它来规避useState是异步更新值的行为，这种情况下代码就更容易出bug，也很难维护了！ 当使用 useState 时，我们如果不正确地处理异步操作，可能
TypeError: undefined is not an object (evaluating '_react.default.defaultProps.object') - RN
TypeError: undefined is not an object (evaluating '_react.default.defaultProps.object') 在 ReactNative 项目开发中，起初对组件属性进行检测的时候使用了 defaultProps 属性，但抛出了如上的异常提示 解决办法 将如上 defaultProps 属性替换为 React 中的 pro
ReactNative 之 TouchableHighlight 组件简易使用 - RN
因 ReactNative 的 Button 组件对 iOS 和 Android 的样式存在差异，所以改变套路尝试使用 TouchableHighlight 手势响应控件来替代按钮的思路，具体 code 如下： export function CallAdminEvent() { // 按钮点击事件 - 右导航栏const { signIn } = useContext(AuthContext)
ReactNative 修改导航状态栏相关属性 - RN
近期接了个使用 ReactNative 为基础的项目，也算是对此正面做进一步的了解，因项目设计有些个性化，前前后后跟 @react-navigation/stack 组件折腾了一番，也尝试了自定义导航组件，最后还是回归使用了官方的导航组件，特此对 StatusBar 简要归纳，官方文档中也介绍的很详细，可以通过文档或者直接跳转进组件中查看对应的属性和方法 如下简要对会常用到的一些属性简要归纳，以便
error Failed to build iOS project. We ran xcodebuild command but it exited with error code 65.- RN
一波一波又一波啊，最近一路掉进去爬出来反反复复，嗯。。。又掉进来了，速战速决记录下继续前行。。 macOS 环境下运行 iOS 模拟器进行调试时抛出的如下异常 异常信息 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. To debug b
ReactNative 运行指定模拟器版本 - RN
日常开发调试中除了真机之外，模拟器是必不可少的一项调试工具，那么如何通过 ReactNative 进行指定设备类型来做为调试参考的模拟器呢，具体操作如下： 首先，需要获取当前可选用的模拟器均有哪些类型，终端执行如下命令： xcrun simctl list devices 其次，根据如上模拟器列表中所拥有的设备类型进行操作，如未有想使用的设备类型，则需要先在指定 IDE 中添加所
Resource and asset merger: Duplicate resources - RN
一波未平一波又起，使用 ReactNative 开发的项目迭代过程中集成了 react-native-image-picker 类库后苹果端运转还算相对稳定，注意添加两端的功能访问的系统权限后正常调用方法实现业务逻辑即可； 因之前一直使用苹果端 iPad 开发调试，后打包 ipa 包也很顺利，但在打包安卓端 apk 的时候遇到了重重问题 。。。 先是 index.android.bundle is
index.android.bundle is packaged correctly for release - RN
因项目迭代新增拍照采集的需求，过程中工程中集成了 react-native-image-picker 的类库，集成和方法调用都还算顺利，但打包安卓 apk 的时候遇到了问题（注：苹果还是很友好的，全程比较顺利！）抛出了如下异常： Unable to load script. Make sure you're either running a Metro server (run 'react-na
RN环境搭建填坑指南-iOS
Q：pod install的时候执行到Installing Flipper-Glog (0.3.6)会报错，并且中断安装 A：检查一下xcode中的Xcode-Preferences-Locations-Command Line Tools，有没有配置。选择一个对应的版本后再回到命令行执行pod install～顺利通过 Q：pod install时出现 Error installing lib