首页 > 其他分享 >React Navive初识

React Navive初识

时间:2023-05-01 20:23:39浏览次数:34  
标签:react cli React 初识 Navive 安装 native

title: 11-React Navive初识
publish: true

搭建开发环境

官方文档:https://reactnative.cn/docs/getting-started.html

安装Node、homebrew、Watchman

安装 homebrew:


安装 watchman:

brew install watchman

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

安装 React Native 的命令行工具(react-native-cli)

安装 react-native-cli:

npm install -g react-native-cli

React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

创建新项目

react-native init MyApp --version 0.44.3

编译并运行 React Native 应用

在 ios 模拟器上运行:

react-native run-ios

调试

官网文档:https://reactnative.cn/docs/debugging.html

访问 App 内的开发菜单

如果是在 iOS 模拟器中运行,还可以按下Command + D快捷键,Android 模拟器对应的则是Command⌘ + M(windows 上可能是 F1 或者 F2),或是直接在命令行中运行adb shell input keyevent 82来发送菜单键命令。

标签:react,cli,React,初识,Navive,安装,native
From: https://www.cnblogs.com/full-stack-linux-new/p/17366939.html

相关文章

  • React路由的使用
    title:07-React路由的使用publish:trueReact路由的使用使用React路由之前,我们需要先安装react-router-dom这个包。比如:yarnaddreact-router-dom代码举例:(1)index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><......
  • React介绍
    title:01-React介绍publish:true虚拟DOM和diff算法在学习React之前,我们需要先了解两个概念:虚拟DOM、diff算法。虚拟DOM问题描述:假设我们的数据发生一点点的变化,也会被强制重建整颗DOM树,这么做,会涉及到很多元素的重绘和重排,导致性能浪费严重。解决上述问题的思路:实......
  • PMP-15-初识项目管理的过程
    一、过程是为了完成一系列预先指定的产品服务或成果而需要执行的相互联系的行动和活动。二、每个过程都有输入和输出,并且过程贯穿了项目管理的全生命周期。三、项目管理中有5大过程组,分别是启动、规划、执行、监控、收尾,这5大过程组构成了项目管理的主要工作。四、在项目管理过......
  • 初识类
    实例封装一个“Point类”来实现平面上的点的操作。1、声明classclass_name{[private:]成员;public:成员;protected:成员;};<1>class_name:类名,一般首字母大写<2>private,public,protected:访问权限<3>成员:数据,函数<4>声明时不会为类分......
  • 11-react使用props.children 处理父子组件之间的传值
    //props.children组件传值import{Component}from"react"importreactDomfrom"react-dom"//床架一个createRef函数用来创建ref对象constHello=(props)=>{console.log(props)props.children('子组件传给父组件的值')//就是子组件标签之间的内容/......
  • 10-react不同层级的组件之间的数据传递数据 createContext 上下文
    //组件传值props接收传递过来的数据importReactDomfrom"react-dom"import{createContext,Component}from"react"//createContextisuseedtocreateacontextbojectionfromcontextproperties//返回一个对象//Provider提供状态Consumer使用状态......
  • 09-react的组件传值 props
    //组件传值props接收传递过来的数据importReactDomfrom"react-dom"import{Component}from"react"//类组件中使用函数组件和类组件注意区分不同的组件使用不同方式接收数据constHellow=(props)=>{console.log(props)return<h1>函数组件</h1>}cla......
  • 08-react修改state数据驱动视图UI的更新【注意和vue的区别】
    //setState修改状态如果是直接修改页面不会改变使用setState修改数据才会驱动视图的改变//setState的原理:修改玩状态之后会调用render函数importReactDomfrom"react-dom"import{Component}from"react"//react状态不可变要重新创建状态,及覆盖原来的......
  • 07 - react 唯一修改state状态的方式 setState
    //setState修改状态如果是直接修改页面不会改变使用setState修改数据才会驱动视图的改变//setState的原理:修改玩状态之后会调用render函数importReactDomfrom"react-dom"import{Component}from"react"classAppextendsComponent{//自增函数ad......
  • vue3源码-一、响应式原理reactive的实现
    reactive的实现使用:使用reactive()函数创建一个响应式对象。import{reactive}from'vue'exportdefault{//`setup`是一个专门用于组合式API的特殊钩子函数setup(){conststate=reactive({count:0})//暴露state到模板return{......