react native 项目创建

创建项目
npx @react-native-community/cli init  项目名称

依赖组件
brew update
brew upgrade openssl readline libyaml gmp

新版本的macos
git clone https://github.com/rbenv/ruby-build.git "$(rbenv root)"/plugins/ruby-build

rbenv环境
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"

#按照ruby的版本
rbenv install 3.4.6

#查询结果
rbenv versions

切换ruby 版本
rbenv global 3.4.6

你可能感兴趣的:(react-native)

  • 【React Native】动态路由与参数传递 秀秀_heo 跨端开发reactnativereact.jsjavascript
    动态路由[id].js文件是个动态路由文件。使用：/courses/1/courses/2都是可以匹配上的，也就说它的最后一个参数是不确定的，可以是任意值。参数传递import{View,Text,StyleSheet,TouchableOpacity}from"react-native";import{Link,useRouter}from"expo-router";exportdefaultf
  • react-native android 环境搭建
    环境：macjava版本：Java11最重要：一定要一定要一定要react涉及到很多的依赖下载，gradle和react相关的，第一次安装环境时有外网环境会快速很多。安装nodejs安装react-nativenpminstallreact-native-clinpminstallreact-native创建一个新项目react-nativeinitfirstReact替换gradle下载源rep
  • ReactNative图片自适应高度 吴佩佩佩佩 ReactNative安卓reactnativeandroid
    importReact,{useState,useEffect}from'react';import{Image}from'react-native';exportdefault({source={},style={},width=0})=>{const[height,setHeight]=useState(100);useEffect(()=>{if(source.uri){//网络图Image
  • React-Native痛点解析之开发环境搭建及扩展 cuoban AndroidReactNativeandroid开发android
    ReactNative简直太火了，国内大公司都在争先恐后的尝鲜，让人难以相信这是诞生刚刚一年的开源项目。正因为它的年轻，在使用它进行开发时难免会遇到这样那样的坑，因此，我们邀请了《ReactNative入门与实战》的作者之一，魅族高级研发经理魏晓军来为我们解析RN开发中的痛点。本文分享的是在环境搭建和扩展中会遇到的问题与解决方案。引言ReactNative的出现，为APP开发者们带来了冲动和激情，
  • react-native 0.6x升级适配说明 Bearin reactnative
    react-native0.6x升级适配说明RN0.6x已经发布有一段时间了，react-navigation也在前不久进入了5x的时代。为了让大家少踩坑，现已将课程升级适配到RN0.6x以及react-navigation5x，另外，包括友盟分享和统计在内的所有插件也已升级是配到最新版。为了帮助到大家顺利的学习使用新版本RN与react-navigation等相关库，我将整个的升级适配过程总结出
  • react-native 踩过的坑 \光辉岁月/
    一、遇到过的坑1.1执行Downloadinghttps://services.gradle.org/distributions/gradle-2.4-all.zip时报错解决方法：复制报错的下载链接，用迅雷下载，将项目地址中的AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties中的distributionUrl=https
  • native react 更新机制_React-Native 实现增量热更新的思路(1) 彼一暝 nativereact更新机制
    所谓热更新就是在不重新安装的前提下进行代码和资源的更新，相信在整个宇宙中还不存在觉得热更新不重要的程序猿。增量热更新就更牛逼了，只需要把修改过和新增的代码和资源推送给用户下载即可，增量部分的代码和资源都比较小，所以整个热更新流程可以在用户无感的情况下完成，我已经想不到更好的更新方式可以让我装更大的逼了。一.实现脚本的热更新1.为什么可以热更新简单地说，因为RN是使用脚本语言来编写的，所谓脚本语言就
  • React Native【详解】内置 API 朝阳39 ReactNativereactnative
    屏幕Dimensions获取屏幕信息import{Dimensions}from"react-native";exportdefaultfunctiondemo(){const{width,height,scale,fontScale}=Dimensions.get("window");console.log(width,height,scale,fontScale);}参数为window时，不包
  • 解决react-native软键盘弹出挡住输入框的问题 曲小强 reactNative采坑之路软键盘弹出挡住输入框react-native
    这是效果：代码：importReact,{Component}from'react';import{View,Text,Button,StyleSheet,TextInput,ScrollView,KeyboardAvoidingView,Dimensions}from'react-native';import{StackActions,NavigationActions,withNavigati
  • react-native键盘弹起遮挡输入框 花程序媛
    importReact,{Component}from'react';import{Platform,StyleSheet,Text,View,Image,FlatList,Dimensions,WebView,TouchableOpacity,TextInput,NativeModules,DeviceEventEmitter,Alert,ToastAndroid,ActivityIndicat
  • react-native键盘遮挡输入框 huaiyanchen react-native
    1、使用组件KeyboardAvoidingView使用注意:在render内使用，需要设置高度keyboardVerticalOffset：有时候应用离屏幕顶部还有一些距离（比如状态栏等等），利用此属性来补偿修正这段距离。2.与ScrollView使用ScrollView标签不要设置高度render(){return(...this._extraUniqueKey(item,index)}ren
  • react native中使用fetch做get请求和post请求
    get请求：importReact,{useState,useRef,useEffect}from'react'import{View,TextInput,Text,Button}from'react-native'importstylefrom'./static/style'exportdefaultfunctionApp(){const[username,setUsername]=useSta
  • React Native【实战范例】网格导航 FlatList 朝阳39 ReactNativereactnative
    importReactfrom"react";import{FlatList,Image,SafeAreaView,StyleSheet,Text,View,}from"react-native";interfaceGridItem{id:string;title:string;imageUrl:string;}//网格布局数据constgridData=Array.from({length:30
  • react-native中ScrollView套ScrollView 诚实可靠王大锤 前端reactnativereact.jsjavascript
    react-native中ScrollView套ScrollView（安卓环境）ScrollView套ScrollView，子ScrollView无法滚动试了很多种方法，都是无效的，最终还是在官方文档中找到了nestedScrollEnabled属性官方说明：在AndroidAPIlevel21（5.0）以上启用嵌套滚动。iOS上默认支持嵌套滚动。所以我在父子ScrollView上全部加上了这个属
  • React Native【实战范例】水平滚动分类 FlatList 朝阳39 ReactNativereactnative
    importReactfrom"react";import{FlatList,SafeAreaView,StyleSheet,Text,View}from"react-native";interfaceitemType{id:string;title:string;icon:string;}//水平滚动数据consthorizontalData:itemType[]=[{id:"1",title:
  • react实现聊天界面_react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
    一、前言9月，又到开学的季节。为每个一直默默努力的自己点赞！最近都沉浸在reactnative原生app开发中，之前也有使用vue/react/angular等技术开发过聊天室项目，另外还使用RN技术做了个自定义模态弹窗rnPop组件。一、项目简述基于react+react-native+react-navigation+react-redux+react-native-swiper+rnPop等
  • [特殊字符] 在 React Native 项目中封装 App Icon 一键设置命令（支持参数与默认路径） YuZou 邹宇 erroRight笔记reactnative
    前置依赖使用的是社区维护的CLI工具：@bam.tech/react-native-make它扩展了react-native命令，支持set-icon功能。安装：yarnadd-D"@bam.tech/react-native-make"封装目标我们希望能够通过以下方式调用：#默认使用./icon.pngyarnset-icon#自定义路径yarnset
  • React-Native之可配置化的图片资源预加载方案 HGC2016 ITjavascriptreactnativehtml5imageview
    背景在RN开发过程中，我们深受Rn包体积的扩大而困扰。为了优化包体积，最直接的方式莫过于减少本地资源的引用（将资源上传到云端）。然而虽然包的体积大大减小，但伴随而来的则是由于网络延时导致的加载缓慢，进而引发严重的体验问题，结果自然就是得不偿失。那么如何解决这样的问题呢，就需要一套可行的资源预加载方案。下面我们将着重讨论图片资源的预加载方案。解决方案1、图片预加载React-Native官方Imag
  • react-native的token认证流程 zwjapple 状态模式reactNativetoken
    在ReactNative中实现Token认证是移动应用开发中的常见需求，它用于验证用户的身份并授权其访问受保护的API资源。Token认证的核心流程：用户登录(Login):用户在前端输入用户名和密码。前端将这些凭据发送到后端API。后端验证凭据。如果验证成功，后端会生成一个Token（通常是JWT-JSONWebToken）并返回给前端。前端接收到Token后，将其安全地存储起来（例如使用Asy
  • React-Native 宝藏库大揭秘：精选开源项目与实战代码解析 @sinner reactnative前端框架移动端
    1.引言1.1React-Native简介React-Native是由Facebook开发的一个开源框架，它允许开发者使用JavaScript和React的编程模型来构建跨平台的移动应用。React-Native的核心理念是“LearnOnce,WriteAnywhere”，即学习一次React的编程模型，就可以在多个平台上进行开发。React-Native的优势包括：性能：通过使用原生组件，Re
  • React-native的新架构 前端react-native
    本文总结:文章主要介绍了ReactNative的新架构，包括以下几个方面的内容：✨如何抹平iOS和Android样式差异，提升跨平台一致性；分析了旧架构中存在的问题，如通信瓶颈、启动慢、维护复杂等；介绍了JSI中间层带来的变革，如：不再强依赖JavaScriptCore引擎；可直接在JS层调用Native方法，提升交互效率；讲解了RN的渲染阶段流程；常用基础库（如ReactNavigation）的
  • react-native在模拟器中访问本地服务踩坑 zwjapple react-native
    localhost，127.0.0.1不能通信。可以在模拟器中测试与本地开发环境中的服务进行交互，但需要确保以下几点：网络配置：模拟器通常会有自己的网络设置，与主机（本地开发环境）的网络隔离。许多模拟器（例如AndroidEmulator或iOSSimulator）支持通过localhost或127.0.0.1访问主机上的服务，但有时需要使用主机的特定IP地址（例如10.0.2.2在Android
  • react-native非路由组件中实现路由跳转 九段刀客 ReactNativejavascriptreactnativereact.js
    使用场景：对请求进行封装，要在封装的逻辑中进行退出登录，跳转到login页面的功能RootNavigation.jsimport{createNavigationContainerRef}from'@react-navigation/native';exportconstnavigationRef=createNavigationContainerRef();
  • React-ZarmUI：跨平台React & React-Native移动端UI组件库 weixin_42668301
    本文还有配套的精品资源，点击获取简介：React-ZarmUI是专为React和React-Native开发者设计的移动端UI组件库，提供简洁、易用、高度可定制化的组件，支持Web和原生移动应用开发。它包含基础和复杂UI组件，具有响应式设计、高度可定制化、易于上手、持续更新与维护的特点。开发者可以利用ZarmUI快速构建美观且功能完善的移动应用。1.React-ZarmUI跨平台特性1.1跨平台框
  • 20. React-native脚手架探索
    本文总结本文主要探讨了ReactNative脚手架的使用与选择，介绍了两种主流工具：ReactNativeCLI和ExpoCLI，并对它们的特点进行了比较分析。ReactNativeCLI：适合需要原生模块能力、自定义程度更高的项目；ExpoCLI：上手简单、配置少，适合快速开发和原型验证。文章还详细介绍了两者的优缺点、组成部分，帮助我们更好地理解它们的适用场景。在实战部分，文章讲解了：如何启动项
  • React ES7 React/Redux/GraphQL/React-Native snippets插件常用代码块 执着的派大星 react.jselasticsearchgraphql
    ES7React/Redux/GraphQL/React-Nativesnippets插件常用代码块生成无状态组件rfc生成类组件rcc打印clg导入imp导入Reactimrthis.setStatesst导入React,useState,useEffectimrse生命周期方法cdm类组件定义方法met生成匿名函数anfn函数组件定义方法nfn解构对象dob解构数组dar间歇调用sti超时调用
  • 【VSCode】ES7 React/Redux/GraphQL/React-Native snippets 插件详解 Peter-Lu #NodeJSvscodereact.jsjavascript前端
    文章目录一、插件简介1.插件的作用2.安装与配置二、常用代码片段介绍1.React代码片段1.1函数组件1.2类组件2.Redux代码片段2.1创建action2.2创建reducer3.ReactHooks代码片段3.1useStateHook3.2useEffectHook4.GraphQL代码片段三、如何在项目中使用插件的代码片段1.快捷键提示2.自定义配置四、插件的优势与适用场景1.提高开
  • “ES7+ React/Redux/React-Native snippets“常用快捷前缀 zwjapple react.jsreactnativejavascript
    请注意，这是一个常用的列表，不是扩展提供的所有前缀。最完整和最新的列表请参考扩展的官方文档或在VSCode中查看扩展的详情页面。React(通常用于.js,.jsx,.ts,.tsx):rfce:ReactFunctionalComponentwithExportDefaultrafce:ReactArrowFunctionComponentwithExportDefaultrce:ReactCl
  • Error while updating property ‘stroke‘ in shadow node of type: ARTShape 流星雨在线 #ReactNative
    一、问题发现好多人跟我一样踩坑react-native-progress与最新版本的react-native不兼容，或者使用到了react-native-community/art的Shape等组件，出现Errorwhileupdatingproperty‘stroke’inshadownodeoftype:ARTShape问题，这里给大家分享下。当然没踩坑的可以略过，给自己留点宝贵的时间去做点别
  • react-native记录zIndex控制页面层次出现透过去的现象 流星雨在线 #ReactNative
    一、问题我这边用react-native为了实现手势按住一个按钮之后切换场景，使用了zIndex进行页面层次的控制，在所有的ios手机上与绝大部分安卓手机上都表现正常。实际正常效果如下：但是在HUAWEImate20手机上出现了第二画没有遮盖住第一画的情况，并且这种情况是少量安卓手机按照特定操作步骤才会复现，如下：二、回顾react-native在z轴的层叠关系平台情况在z轴的层叠关系安卓既没有z
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他