React Native
文章平均质量分 55
React Native是一个由 Facebook 推出的开源移动应用开发框架,它提供了跨平台开发的能力,同时保持了原生应用的性能和外观。
**之火
希望一直深耕钱端领域,但也喜欢涉猎其他计算机编程领域,钱端幸福三要素:悠闲,寡欲,融入自然。
展开
-
React Native 之 expo-cli使用 (二十四)
在初始化过程中,你会被要求选择一个模板。根据你的需要选择一个模板,例如blank(空白模板)用于项目演示、组件预览或个人项目。expo-cli会启动一个开发服务器,并提供一个二维码。你可以使用Expo客户端应用扫描这个二维码来在你的设备上预览你的应用。使用expo-cli初始化一个新的React Native项目。原创 2024-06-03 23:19:03 · 417 阅读 · 1 评论 -
React Native 之 react-native-share(分享)库 (二十三)
react-native-share 是一个流行的 React Native库,它允许你在移动应用中分享文本、链接、图片等内容到各种社交网络和消息应用。以下是对其原理的简要概述以及代码示例的解析。原创 2024-06-01 21:37:33 · 423 阅读 · 0 评论 -
React Native 之 AppState(应用状态)(二十二)
AppState 模块通过监听系统广播的意图(Intents)或应用生命周期事件来实现其功能。当应用的状态发生变化时(例如,用户切换到另一个应用或返回到主屏幕),系统会发送一个相应的意图或事件。AppState 模块捕获这些事件,并通过其提供的 API 将状态变化通知给应用。原创 2024-05-31 22:32:14 · 350 阅读 · 0 评论 -
React Native 之 BackHandler (二十)
button)和 iOS 设备上的手势返回(swipe back gesture)的模块。在 React Native 应用中,当用户按下返回按钮或执行返回手势时,默认情况下,应用会导航回前一个屏幕或者如果已经在栈底则退出应用。但是,有时候你可能需要自定义这些行为,例如弹出一个确认对话框或者执行一些清理操作。是一个用于处理 Android 设备上的硬件返回按钮(back。react-native 中的。原创 2024-05-29 22:02:25 · 827 阅读 · 0 评论 -
React Native 之 ToastAndroid(提示语)(二十一)
ToastAndroid 是 React Native 提供的一个特定于 Android 平台的API,用于显示简单的消息提示(Toast)。原创 2024-05-29 22:27:54 · 987 阅读 · 1 评论 -
React Native 之 开发环境搭建(一)
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量,选中Path变量,然后点击编辑。这包括创建AVD(Android Virtual Device,即Android虚拟机)以模拟Android设备,以及配置必要的Android SDK和构建工具。打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建,创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录。原创 2024-05-13 21:12:35 · 993 阅读 · 1 评论 -
React Native 之 样式使用(三)
常见的做法是按顺序声明和使用style属性,以借鉴 CSS 中的“层叠”做法(即后声明的属性会覆盖先声明的同名属性)。原创 2024-05-15 22:41:33 · 271 阅读 · 0 评论 -
React Native 之 原生组件和核心组件(二)
在 React Native 中,则使用 React 组件通过 JavaScript 来调用这些视图。在运行时,React Native 为这些组件创建相应的 Android 和 iOS 视图。由于 React Native 组件就是对原生视图的封装,因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。React Native 使用与 React 组件相同的 API 结构。React Native 具有许多核心组件,从表单控件到活动指示器,应有尽有。原创 2024-05-14 09:16:54 · 375 阅读 · 0 评论 -
React Native 之 颜色(七)
React Native 中的组件是使用 JavaScript 进行样式化的。颜色属性通常与 Web 上的 CSS 工作方式相匹配。原创 2024-05-20 09:26:12 · 313 阅读 · 0 评论 -
React Native 之 图片使用(六)
如果没有,则会选择最接近的尺寸进行缩放,但也至少缩放到比所需尺寸大出 50%,以使图片看起来仍然足够清晰。如果没有图片恰好满足屏幕分辨率,则会自动选中最接近的一个图片。然而,读取本地静态图片(使用require(‘./my-icon.png’)语法)则无需指定尺寸,因为它们的尺寸在加载时就可以立刻知道。大小的元素占位,然后下载图片,在下载完成后再基于正确的尺寸来渲染图片。如果你有my-icon.ios.png和my-icon.android.png,Packager 就会根据平台而选择不同的文件。原创 2024-05-19 23:39:08 · 1043 阅读 · 0 评论 -
React Native 之 主题偏好(十一)
需要安装 react-native-appearance(如果它还不是 React Native 的一部分)。原创 2024-05-25 00:00:48 · 280 阅读 · 0 评论 -
React Native 之 键盘(十四)
在 React Native 中,当用户与文本输入组件(如 TextInput)交互时,系统可能会自动显示键盘。,因为键盘的显示和隐藏主要是由系统根据用户的交互行为来管理的。但是,你可以通过一些方法影响键盘的行为,比如设置 TextInput的属性来控制键盘的类型,或者在用户完成输入后手动隐藏键盘。原创 2024-05-26 21:16:02 · 306 阅读 · 0 评论 -
React Native 之 PanResponder(多点触摸)(十六)
PanResponder 允许你捕获并响应一系列的触摸事件,如开始(start)、移动(move)、结束(end)和取消(cancel)。这使得开发者能够创建复杂的触摸交互,如拖拽、滑动等。原创 2024-05-27 21:45:09 · 260 阅读 · 0 评论 -
React Native 之 高度与宽度(四)
如果有多个并列的子组件使用了flex:1,则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样,则谁的值更大,谁占据剩余空间的比例就更大。如果父容器既没有固定的width和height,也没有设定flex,则父容器的尺寸为零。其子组件如果使用了flex,也是无法显示的。按比例填充屏幕上某一部分,又不想使用 flex 布局,可以在组件的style中使用百分比。React Native 中的尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。原创 2024-05-17 09:14:30 · 272 阅读 · 0 评论 -
React Native 之 接口请求(十八)
React Native 提供了和 web 标准一致的Fetch API,用于满足开发者访问网络的需求。如果你之前使用过XMLHttpRequest(即俗称的 ajax)或是其他的网络 API,那么 Fetch 用起来将会相当容易上手。原创 2024-05-22 21:25:58 · 708 阅读 · 0 评论 -
React Native 之 处理触摸事件(八)
React Native 提供了可以处理常见触摸手势(例如点击或滑动)的组件, 以及可用于识别更复杂的手势的完整的手势响应系统。Button是一个简单的跨平台的按钮组件。原创 2024-05-21 22:44:17 · 639 阅读 · 0 评论 -
React Native 之 像素比例(十七)
在 React Native 中,。像素比(或称为设备像素密度、DPI 密度等)是物理像素和设备独立像素(DIPs 或 DPs)之间的比率。设备独立像素是一种抽象的度量单位,使得开发者可以编写不依赖于特定屏幕分辨率的代码。原创 2024-05-28 21:43:33 · 550 阅读 · 0 评论 -
React Native 之 Flexbox 布局(五)
在 React Native 中使用 flexbox 规则来指定某个组件的子元素的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构。原创 2024-05-18 21:32:27 · 1118 阅读 · 0 评论 -
React Native 之 Alert()和prompt()(十三)
在 React Native 中,Alert 是一个全局的 API,用于显示原生系统的对话框。与 Web 浏览器中的函数类似,但它提供了更多的功能和更好的用户体验,因为它是基于原生系统的对话框,而不是基于 Web 的弹出框。原创 2024-05-25 21:48:30 · 269 阅读 · 0 评论 -
React Native 之 StyleSheet (十)
react-native 中的 StyleSheet 是一个非常重要的工具,它允许我们以一种更加简洁和可维护的方式来编写和管理样式。在react-native 中,我们不能直接使用像 web 开发中的 CSS 那样直接写样式,而是需要将样式对象传递给组件的 style属性。原创 2024-05-24 23:49:06 · 269 阅读 · 0 评论 -
React Native 之 Linking(链接)(十五)
URL Scheme允许应用程序通过特定的URL格式与其他应用程序进行交互。它通过在应用程序中注册一个自定义的URL Scheme,并在应用程序中生成一个特定格式的URL(包含所需的参数和操作),来实现这一功能。当用户点击这个URL时,操作系统会尝试打开与该URL关联的应用程序,并将URL传递给该应用程序进行处理。原创 2024-05-27 21:16:28 · 1151 阅读 · 0 评论 -
React Native 之 Platform检测平台模块(十九)
是一个用于检测当前运行平台(如 iOS、Android 或Web)的模块。它提供了一组静态属性和方法,允许你根据平台的不同来编写特定的代码或样式。这对于确保跨平台应用在不同操作系统上的一致性和正确性非常有用。原创 2024-05-28 22:15:56 · 519 阅读 · 1 评论 -
React Native 之 动画Animated(十二)
react-native 的 Animated API提供了一种声明式的方式来创建平滑的动画效果。它允许你编写动画逻辑,并将动画值直接绑定到组件的样式或布局属性上。原创 2024-05-25 18:44:30 · 219 阅读 · 0 评论