React Native单元测试
参考文章：https://blog.csdn.net/xiangzhihong8/article/details/83547346配置Babelyarn add --dev babel-jest babel-core regenerator-runtime完整配置为了方便查看， 下面是package.json文件的完整配置：{ "name": "jest_enzyme", "version": "0.0.1", "private": true, "scripts": { "start": "n...
2024-01-10
React Native学习笔记
1. react-native init AwesomeProject原因分析：react-native 0.55.6版本的问题，需要在init项目的时候指定老版本号，比如0.55.4解决方案：react-native init AwesomeProject -- version 0.55.42. react-native run-android Execution failed for task ‘:app:prepareSrolkReactNativeFilePickerUnspecifiedLibra...
2024-01-10
React Native开发入门
目录：一、前言二、什么是React Native三、开发环境搭建四、预备知识五、最简单的React Native小程序六、总结七、参考资料 一、前言虽然只是简单的了解了一下React的皮毛，但是对React Native的学习就轻松了好多。所以在学习React Native之前，最好还是先学习一下React。因为我学习的iOS开发，对iOS更...
2024-01-10
配置React Native环境
“Homebrew installs the stuff you need that Apple didn’t.——Homebrew OS X 更完整”。 Homebrew的官网（多语言版本）简单明了地介绍了如何安装和使用这个工具，;并提供了自己的Wiki。 brew的安装很简单，使用一条ruby命令即可，Mac系统上已经默认安装了ruby":ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Ho...
2024-01-10
React Native_环境编译
官方环境搭建一、两种方式运行程序1、指令运行：react-native run-android。运行结果如下图通过指令运行结果二：直接通过android studio运行二、遇到的问题1、unable to load script.make sure you're either running a metro server。如下图所示。标题异常图像a：通过指令启动时没有启动metro server解决方法：1：运行 adb rev...
2024-01-10
React Native中解析HTML
使用这个react-native-htmlview可以解析HTML字符串。实现效果和vue中的v-html指令或jQuery中$(Selector).html()相同示例：import React from 'react'import {Text,View} from 'react-native'import HTMLView from 'react-native-htmlview'export default class Favorites extends React.Component{ rend...
2024-01-10
React-Native踩坑记录二
1.Image组件的borderRadius画圆有平台兼容性问题，在IOS下会失效解决方法有几种(1)在外面包裹一层View,对View组件使用borderRadius就可以了，这是我的做法(2)在同一级属性块下加上overflow: 'hidden'，我没试过，大家可以阅读下面的链接https://www.jianshu.com/p/d237f02584182.React-Native的渐变实现方案(1) 使用react-native-li...
2024-01-10
皇帝的新装-React-Native
先看看React-Native的介绍。React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习...
2024-01-10
React Native View组件实例
我们如何通过RN实现如图所示的效果：一：图形分析1.1：图形分为3列，我们设置flexDirection为“”row”，每个View独占1/3，flex设置为11.2：2,3列先把图形均分为上下两部分，填充内容1.3：给2,3列设置边框二：代码实现按照一的分析，实现逻辑如下：2.1：把布局分为3部分2.2：分别填充内容2.3：添加...
2024-01-10
React Native中的全局变量/常量
在ReactNative中，有一种方法可以在全局变量上定义将要使用的所有字符串，就像在Android开发中一样，这里有一个String.xml，您可以在其中放置所有字符串。回答：我要做的是创建一个globals模块…//文件：Globals.jsmodule.exports = { STORE_KEY: 'a56z0fzrNpl^2', BASE_URL: 'http://someurl.com', COLOR: { ORANGE: '#C50', DA...
2024-01-10
React Native获取组件位置和大小
RN页面中定位或滚动操作时，需要获取元素的大小和位置信息，有几种常用的方法获取设备屏幕的宽高import {Dimensions} from 'react-native';var {height, width} = Dimensions.get('window');获取元素的大小和位置信息1. onLayout事件属性<View onLayout={this._onLayout}><View>_onLayout = (e) => { let {x,y,width,height} = e.nativeE...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 调试技巧](/wp-content/uploads/thumbs/534118_thumbnail.jpg)
[RN] React Native 调试技巧
React Native 调试技巧一、 安卓模拟器调出Dev Setting 命令adb shell input keyevent 82二、图片不出来时，先运行此命令，再重新 runreact-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/s...
2024-01-10
React Native 设置RGBA背景色
React Native 设置RGBA背景色：可以先用Mac自带吸色工具，获取RGB值，然后设置背景如下：backgroundColor: 'rgba(52, 52, 52, 0.8)',透明度值也可以如下设置：backgroundColor:'rgba(52,52,52,alpha)',...
2024-01-10
设置React native 本地镜像源
npm get registry // 获取本地镜像源npm set registry http://47.99.200.213:4873 // 设置本地镜像源npm ERR! code ETARGETnpm ERR! notarget No matching version found for [email protected]npm ERR! notarget In most cases you or one of your dependencies are requestingnpm ERR! n...
2024-01-10![[<span style='color:red;'>React Native</span>]Promise机制](/wp-content/uploads/thumbs/534109_thumbnail.jpg)
[React Native]Promise机制
React Native中经常会看到Promise机制。 Promise机制代表着在JavaScript程序中下一个伟大的范式。可以把一些复杂的代码轻松撸成一个串，和Android中的rxjava非常像。Promise代表一个任务结果，这个任务有可能完成，有可能没有完成。Promise模式唯一需要的一个接口是调用then方法，用来注册当Promise完成或者失败...
2024-01-10
React Native SDK for OSS
此文主要介绍 React Native SDK for OSS的方方面面，包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文章《从0开始搭建React Native for OSS项目》。背景OSS支持React Native SDK，主要有以下几个原因。React Native跨平台开发...
2024-01-10![[RN] <span style='color:red;'>React Native</span> 实现图片预览](/wp-content/uploads/thumbs/533940_thumbnail.jpg)
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览：代码如下：'use strict';import React, {Component} from 'react';import {Image, StyleSheet, Text, View, ViewPagerAndroid, Dimensions} from 'react-native';const {width, height} = Dimensions.get("window");//图片地址const PAGE_IMAGES = [ '...
2024-01-10无法运行jetifier React Native
我尝试运行react-native run-android，但出现此错误。info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag. error Failed to run jetifier. Run CLI with --verbose flag for more details. Error: spawnSync C:\Users\JayK...
2024-01-10
React-Native 环境搭建和使用模拟器调试
关于React-NativeReact native源自React，React 是一套可以用简洁的语法高效绘制Dom的框架。React中需要使用JSX语法，JSX是对JavaScript的扩展。JSX可以将CSS，HTML，表达式进行一起书写，简化了html代码书写的形式。优势跨平台兼容性使用React Native，您可以编写一次代码并多次部署到Android和iOS操作系统。对于...
2024-01-10
React Native安卓项目打包发布APK步骤
1、产生签名的key该过程会用到keytool，开发过安卓的都应该接触过该东西。详细请见密钥和证书管理工具。在项目的主目录（不是android文件夹）中执行：--生成签名key，注意记下你的密钥和存储密码，后面配置文件需要使用keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -val...
2024-01-10
React 之 setState
前言： state是React中非常重要的概念。React通过管理状态来实现对组件的管理，React通过this.state来访问state,又通过this.setState()来更新state,当this.setState()方法被调用时，React会重新调用render函数来重新渲染UI。一、setState异步更新 setState通过一个队列机制实现state更新。当执行setState时，会将需要更...
2024-01-10
React Native 开发之 IDE 选型和配置
React Native 发布一年多了，有不少公司已经在线上产品中或小范围试水，或大范围应用，很多公司或开发者都在为 React Native 的生态系统作出自己的贡献。React Native 的开发基本上是 Javascript ＋ 系统原生开发语言（Java，Objective-C，Swift），原生语言的开发所用的 IDE 没有多余的选择，Android 平台只能使用 An...
2024-01-10
使用TypeScript创建React Native
⒈初始化 React Native环境 参考https://reactnative.cn/docs/getting-started.html⒉安装React Native官方的脚手架工具npm install -g @react-native-community/cli⒊使用React Native脚手架初始化项目#默认是JavaScriptnpx react-native init ts_react_native#可以直接使用TypeScript初始化npx react-native init ts_r...
2024-01-10
React-native真机调试遇到的问题
React-native真机调试遇到的问题打开官网，有关于如何真机调试的文档：https://reactnative.cn/docs/running-on-device/第一步准备工具： 1、iPhone手机 2、usb数据线 3、Apple ID连上数据线之后，打开Xcode，设置：如果这是第一次在iOS设备上运行app，需要注册开发设备。从Xcode菜单栏打开Product菜单，然后...
2024-01-10
React Native Css简介及其与前端Css不同
Css简介作为一名前端工作者对css都是非常熟悉的，前端三要素为结构html表现css及行为js。结构负责整个页面的骨架，展现其主要内容，表现相当于外貌，使其更为丰满可观，而行为则负责人机交互以及一些复杂的动态效果。css遵循其语言规范进行工作，其语法结构也是非常的简单。本文不在此赘述css...
2024-01-10
