React-native学习-----Start

最新推荐文章于 2024-07-31 23:34:46 发布
最新推荐文章于 2024-07-31 23:34:46 发布
阅读量643 收藏
点赞数
分类专栏： React-native 文章标签： 基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chelongfei/article/details/79726438
版权

由于公司业务需求，最近正在研究React-native,主要参照的资料： 1.reactNative中文网 2.ReactJs网站 3.ReactNative移动开发实战。

在此记录所遇到的疑惑和自己个人的一些想法和感悟。

chelongfei
关注
专栏目录
react-native-restart：具有一个目标的React Native软件包：重新启动您的React Native项目
02-02
React本机重启 有时您想在应用程序运行时重新加载应用程序包。 该软件包将允许您执行此操作。 iOS GIF Android GIF 安装 使用react-native < 0>= 0.62 ？ 安装react-native-restart@0.0.20及以上 带yarn $ yarn add react-native-restart 与npm $ npm install --save react-native-restart 自动链接设置（本机> = 0.60） 的iOS $ cd ios $ pod install 安卓 无需采取进一步措施 自动安装（无自动链接） react-native link react-native-restart或npm install -g rnpm && rnpm link react-native-restart 手动安装Android 在android/settings.gradle .. . include ' :reac
react-native-super-lottery:react native prize wheel 9宫格抽奖
05-02
react-native-super-lottery Show Case Install $ npm i react-native-super-lottery --save Usage 转盘只支持九宫格。 // 引入相关的类库 import { Lottery, LotteryItem } from 'react-native-super-lottery'; // ...
8.react-native start 在终端运行native
测试0901-1
04-25 936
8.react-native start 在终端运行native
React-Native 宝藏库大揭秘：精选开源项目与实战代码解析
最新发布
sinner小屋
07-31 1193
React-Native Elements 是一个高度可定制的 UI 工具包，它为 React-Native 开发者提供了丰富的 UI 组件，如按钮、卡片、表单等。这些组件不仅外观现代，而且易于集成和使用，大大简化了 UI 开发过程。React-Native Elements 的设计理念是提供一个统一的 UI 层，让开发者能够快速构建出美观且功能丰富的应用界面。下面是一个简单的代码示例，展示如何使用 React-Native Elements 的自定义主题和组件。// 自定义主题Button: {
react-native start 运行流程
adp86875的博客
12-28 702
在CMD下键入 C:\Node_JS\MyAwesomeProject>react-native start 运行流程: C:\Users\Grart\AppData\Roaming\npm\react-native.cmd C:\Users\Grart\AppData\Roaming\npm\node_modules\react-native-cli\index.js...
React Native中文网
雨林
02-21 1332
React Native中文网 https://reactnative.cn/   教程：http://v.youku.com/v_show/id_XMTQ5OTE3MjkzNg==.html
react-native-video视频播放功能
04-29
1.实现播放、暂停视频；...下载代码之后：npm install，然后npm start，然后npm link 安装包（react-native link react-native-orientation，react-native link react-native-video），然后再链接即可查看效果
create-react-native-app：创建可在iOS，Android和Web上运行的React Native应用
01-29
创建没有构建配置的Universal React Native应用。 npx create-react-native-app 一旦启动并运行Create React Native App，请访问，以获取有关使用React构建移动应用程序的更多信息。 产品特点 准备在您的设备上构建...
react-native-paypal:使用React Native的PayPal克隆
05-13
React本机贝宝 与本机React的PayPal克隆。 安装 $ git clone git@github.com:PunitGr/react-native-paypal.git $ yarn $ cd react-native-paypal $ yarn start
react-native-pushy, ReactNative中文网推出的代码热更新服务.zip
10-10
react-native-pushy, ReactNative中文网推出的代码热更新服务
ReactNative入坑记1--reactnative start遇到问题
blf09的专栏
07-16 312
1 /Users/lihongz/Library/LaunchAgents/com.github.facebook.watchman.plist for write: Permission denied 解决办法：react-native start前面加sudo -s 加强权限 2 8081端口被占用问题 解决办法：1 实用其他端口 2 kill 占用端口的...
React-Native学习之路（二）组件的生命周期
Leon_Jcy的博客
07-24 1141
React-Native组件的生命周期 2018年7月19日 16:03  上图为React-Native组件的生命周期图，由于我编写时constructor已经替代了getDefaultProps和getInitialState两个方法所以重新做了张图以供学习。 一、初始化阶段 1）.constructor：         constructor即构造函数，我们可以在里面初始化...
react-native 启动流程原理解析
weixin_33724059的博客
01-18 1170
前言 项目中用到RN也有一段时间了， 从刚开始的懵懂到现在的熟能生巧，其实还是很长的，每次接触一个新的东西的时候，刚开始一定是比较痛苦的，不知道要如何下手，这里从js到Android原生去一步步解析React Native是如何做到如此巧妙的通信的。希望能对你们有所帮助。 这里以我目前项目中用到的版本为例： { "react": "16.0.0-alpha.12", "react-na...
2024最新 React Native 基础教程（第一篇：Quick Start）
理想是做一个自由的coder
05-25 986
react native快速入门篇
React Native | 启动流程
分享经验与经历
11-01 2401
我们主要关注的是有 CatalystInstace 负责的 js bundle 加载过程，这里我们需要说明一下，单单从 CatalystInstace 名字我们就能知道其职责，催生一个 React 应用实例，其是一个混合对象，一部分是由 JVM 堆分配的 java 对象，一部分是由操作系统分配的 cpp 对象。当实例化一个 CatalystInstanceImpl 对象之后，会在构造器中，初始化 native 到 js 的桥，在这条桥上游两条消息通道，一条通往 js，一条通往模块调用。
react-native style
07-26
React Native 是一种基于 React 构建的开源框架，用于构建跨平台移动应用（支持 iOS 和 Android）。它允许开发者使用 JavaScript 和 React 来编写原生应用界面组件，这使得开发过程更加高效并能共享代码库。 ### 基本概念 #### 组件 React Native 应用由一系列可重用的组件组成，每个组件代表 UI 中的一个部分。组件通过属性（props）传递参数给子组件，而状态（state）则用来存储组件内部的数据，可以根据状态变化来更新UI。 #### 生命周期 React Native 组件拥有生命周期方法，类似于 React.js，在创建、渲染、更新、卸载时触发相应的回调函数，如 `componentDidMount`、`componentWillReceiveProps`、`shouldComponentUpdate`、`componentDidUpdate` 和 `componentWillUnmount`。 #### 样式 样式可以通过自定义 StyleSheet 对象实现，也可以使用 CSS-in-JS 方法，如 styled-components 或者 react-native-styled-components。 ### 示例 - 创建简单的按钮 下面是一个简单的 React Native 示例，展示了如何创建一个按钮组件： ```javascript import React from 'react'; import { Button } from 'react-native'; const App = () => { return ( <Button title="点击我" onPress={() => console.log('Button clicked!')} // 可以在这里添加事件监听逻辑 /> ); }; export default App; ``` 在这个例子中，我们导入了 `Button` 组件来自 `react-native` 模块，并将其放置在一个根元素内。当用户点击按钮时，控制台会打印 "Button clicked!"。 ### 如何开始使用 React Native 1. **安装环境**：首先，确保已安装 Node.js 和 npm。然后，使用 `create-react-native-app` 或 `expo init` 命令来创建一个新的 React Native 项目。 ```bash npx create-react-native-app your-project-name ``` 2. **运行应用程序**：在项目目录中启动开发服务器并查看应用： ```bash cd your-project-name npm start ``` 3. **打开模拟器或连接设备**：通过 `adb`（Android）或 `ios` 命令来启动默认的 Android/iOS 模拟器或连接物理设备。 4. **开发和调试**：编辑 `.js` 文件并在设备上实时预览更改。 ### 相关问题: 1. 如何在 React Native 中处理触摸事件？ 2. React Native 怎样集成第三方库？ 3. 如何利用 React Native 开发跨平台桌面应用？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值