博客园 - rogerwu
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=61455
2023-05-16T08:02:18Z
rogerwu
https://www.cnblogs.com/rogerwu/
feed.cnblogs.com
https://www.cnblogs.com/rogerwu/p/17405936.html
ReactNative 配置路径别名 - rogerwu
1、安装依赖 babel-plugin-module-resolver yarn add babel-plugin-module-resolver -D 2、配置 babel.config.js module.exports = { presets: ['module:metro-react-nat
2023-05-16T08:02:00Z
2023-05-16T08:02:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】1、安装依赖 babel-plugin-module-resolver yarn add babel-plugin-module-resolver -D 2、配置 babel.config.js module.exports = { presets: ['module:metro-react-nat <a href="https://www.cnblogs.com/rogerwu/p/17405936.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/17356798.html
ReactNative 桥接原生原子组件(二) - rogerwu
在上文 ReactNative 桥接原生原子组件(一)中介绍了在 JS 层如何桥接原生层组件以及封装原生组件的属性,那如何封装原生组件的方法呢? ♦ 原生组件回调 JS 层方法 指的是一个事件发生在原生层,从原生层把事件传递到 JS 层 接下来要在上文的 demo 中添加一个小的需求,点击一个按钮,
2023-04-28T09:27:00Z
2023-04-28T09:27:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】在上文 ReactNative 桥接原生原子组件(一)中介绍了在 JS 层如何桥接原生层组件以及封装原生组件的属性,那如何封装原生组件的方法呢? ♦ 原生组件回调 JS 层方法 指的是一个事件发生在原生层,从原生层把事件传递到 JS 层 接下来要在上文的 demo 中添加一个小的需求,点击一个按钮, <a href="https://www.cnblogs.com/rogerwu/p/17356798.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/17353188.html
ReactNative 桥接原生原子组件(一) - rogerwu
♦ 实现一个原生自定义组件 View 1、打开 Android Studio 编辑器,在 android > app > src > main > java > com.rndemo (项目包名) 下新建一个 view 包 2、在 view 包下新建一个 InfoView 类,这个就是要提供给 JS
2023-04-26T09:05:00Z
2023-04-26T09:05:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】♦ 实现一个原生自定义组件 View 1、打开 Android Studio 编辑器,在 android > app > src > main > java > com.rndemo (项目包名) 下新建一个 view 包 2、在 view 包下新建一个 InfoView 类,这个就是要提供给 JS <a href="https://www.cnblogs.com/rogerwu/p/17353188.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/17350113.html
React Native 桥接原生模块 - rogerwu
原生模块简介 有时候一个 RN 应用需要访问一个原生平台的 API 比如相机,但是,默认情况下 JavaScript 是无法访问原生 API 的。 原生模块系统暴露了一些 Java 类的实例对象给 JavaScript,这样就可以允许开发者在 JS 代码中执行一些特定的原生代码。 简单来说,桥接原生
2023-04-24T09:21:00Z
2023-04-24T09:21:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】原生模块简介 有时候一个 RN 应用需要访问一个原生平台的 API 比如相机,但是,默认情况下 JavaScript 是无法访问原生 API 的。 原生模块系统暴露了一些 Java 类的实例对象给 JavaScript,这样就可以允许开发者在 JS 代码中执行一些特定的原生代码。 简单来说,桥接原生 <a href="https://www.cnblogs.com/rogerwu/p/17350113.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/17339896.html
ReactNative 打包发布 Android 应用 - rogerwu
一、创建应用签名 1、在 Android Studio 菜单栏中,依次点击 Build > Generate Signed Bundle/APK 2、在 Generate Signed Bundle or APK 对话框中,选择 APK,点击 Next 按钮 3、在 Key store path 字
2023-04-21T08:48:00Z
2023-04-21T08:48:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】一、创建应用签名 1、在 Android Studio 菜单栏中,依次点击 Build > Generate Signed Bundle/APK 2、在 Generate Signed Bundle or APK 对话框中,选择 APK,点击 Next 按钮 3、在 Key store path 字 <a href="https://www.cnblogs.com/rogerwu/p/17339896.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/17302744.html
win11环境下安装配置 jdk 11 - rogerwu
1、jdk 11 下载 (1)、Oracle 官方下载地址,https://www.oracle.com/java/technologies/downloads/#java11 (2)、依次选择对应的 jdk 版本、操作系统环境后点击下载(可能需要注册、登录账号) 2、jdk11安装 (1)、双击
2023-04-10T06:07:00Z
2023-04-10T06:07:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】1、jdk 11 下载 (1)、Oracle 官方下载地址,https://www.oracle.com/java/technologies/downloads/#java11 (2)、依次选择对应的 jdk 版本、操作系统环境后点击下载(可能需要注册、登录账号) 2、jdk11安装 (1)、双击 <a href="https://www.cnblogs.com/rogerwu/p/17302744.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16666530.html
React Native 组件介绍(一) - rogerwu
Text 一个用于显示文本的 React 组件,支持嵌套、样式、以及触摸处理 style 属性 color: 基本同 css 写法 fontSize: number 类型(默认大小 14) fontStyle: enum('normal', 'italic') fontFamily: string,
2022-09-07T09:23:00Z
2022-09-07T09:23:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】Text 一个用于显示文本的 React 组件,支持嵌套、样式、以及触摸处理 style 属性 color: 基本同 css 写法 fontSize: number 类型(默认大小 14) fontStyle: enum('normal', 'italic') fontFamily: string, <a href="https://www.cnblogs.com/rogerwu/p/16666530.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16643068.html
React Native 样式与布局 - rogerwu
样式 在 React Native 中,仍然是使用 JavaScript 来写样式,所有的核心组件都接受名为 style 的属性,这些样式名基本上都遵循 web 上的 CSS 属性名 RN 中的样式与 CSS 的不同 1、没有继承性 RN 中的继承只发生在 Text 组件上 2、样式名采用小驼峰命名
2022-09-01T06:09:00Z
2022-09-01T06:09:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】样式 在 React Native 中,仍然是使用 JavaScript 来写样式,所有的核心组件都接受名为 style 的属性,这些样式名基本上都遵循 web 上的 CSS 属性名 RN 中的样式与 CSS 的不同 1、没有继承性 RN 中的继承只发生在 Text 组件上 2、样式名采用小驼峰命名 <a href="https://www.cnblogs.com/rogerwu/p/16643068.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16636720.html
搭建 React Native 开发环境 - rogerwu
React Native 官网地址:https://www.reactnative.cn/docs/environment-setup 开发平台 Windows 目标平台 Android 1、安装依赖 必须安装的依赖有 Node、JDK 和 Android Studio,Node 版本不得低于 14
2022-08-31T06:31:00Z
2022-08-31T06:31:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】React Native 官网地址:https://www.reactnative.cn/docs/environment-setup 开发平台 Windows 目标平台 Android 1、安装依赖 必须安装的依赖有 Node、JDK 和 Android Studio,Node 版本不得低于 14 <a href="https://www.cnblogs.com/rogerwu/p/16636720.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16443126.html
多主题 - rogerwu
主题(UI风格、样式、皮肤) 主题风格可通过 theme 来定义,从而实现整个 App 风格的统一 一旦设置了主题,那么应用程序中的某些 Widget,就会直接使用主题的样式 组件 ThemeData - Brightness (Brightness.light | Brightness.dark)
2022-07-04T07:32:00Z
2022-07-04T07:32:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】主题(UI风格、样式、皮肤) 主题风格可通过 theme 来定义,从而实现整个 App 风格的统一 一旦设置了主题,那么应用程序中的某些 Widget,就会直接使用主题的样式 组件 ThemeData - Brightness (Brightness.light | Brightness.dark) <a href="https://www.cnblogs.com/rogerwu/p/16443126.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16426773.html
多语言(国际化) - rogerwu
国际化(internationalization 简称 i18n) 终端(手机)系统语言切换时,flutter 应用跟随切换 内容 组件(Widget)国际化 例如:日历、弹窗等常用组件的国际化 文本国际化(包括文本的顺序) 自定义文本的国际化 1、组件国际化 使用步骤: (1)、在 pubspec
2022-06-30T09:53:00Z
2022-06-30T09:53:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】国际化(internationalization 简称 i18n) 终端(手机)系统语言切换时,flutter 应用跟随切换 内容 组件(Widget)国际化 例如:日历、弹窗等常用组件的国际化 文本国际化(包括文本的顺序) 自定义文本的国际化 1、组件国际化 使用步骤: (1)、在 pubspec <a href="https://www.cnblogs.com/rogerwu/p/16426773.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16427894.html
动画 - rogerwu
UI 界面设计合理的动画,可以让用户觉得更加流畅、直观,可以极大提高和改善用户体验 实现原理 动画就是动起来的画面 视觉暂留:画面经视神经传入大脑后,不会立即消失(会存留一段时间) 帧(Frame):单个的画面,在学术上叫帧 每秒钟展示的帧数简称 fps (Frame per Second) 动画分
2022-06-30T09:51:00Z
2022-06-30T09:51:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】UI 界面设计合理的动画,可以让用户觉得更加流畅、直观,可以极大提高和改善用户体验 实现原理 动画就是动起来的画面 视觉暂留:画面经视神经传入大脑后,不会立即消失(会存留一段时间) 帧(Frame):单个的画面,在学术上叫帧 每秒钟展示的帧数简称 fps (Frame per Second) 动画分 <a href="https://www.cnblogs.com/rogerwu/p/16427894.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16331457.html
Flutter 表单 - rogerwu
表单 -- Switch Switch value:开关的值,一般与状态字段绑定 onChanged:开关状态变更时调用 activeColor:开关开启时的圆圈颜色 activeTrackColor:开关开启时的轨道颜色 inactiveThumbColor:开关关闭时的圆圈颜色 inactive
2022-05-31T12:23:00Z
2022-05-31T12:23:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】表单 -- Switch Switch value:开关的值,一般与状态字段绑定 onChanged:开关状态变更时调用 activeColor:开关开启时的圆圈颜色 activeTrackColor:开关开启时的轨道颜色 inactiveThumbColor:开关关闭时的圆圈颜色 inactive <a href="https://www.cnblogs.com/rogerwu/p/16331457.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16325818.html
Flutter 导航 - rogerwu
Drawer 导航 Scaffold drawer(左侧抽屉菜单) endDrawer(右侧抽屉菜单) UserAccountsDrawerHeader 抽屉菜单头部组件 AboutListTile 关于弹窗 import 'package:flutter/material.dart'; class
2022-05-30T01:56:00Z
2022-05-30T01:56:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】Drawer 导航 Scaffold drawer(左侧抽屉菜单) endDrawer(右侧抽屉菜单) UserAccountsDrawerHeader 抽屉菜单头部组件 AboutListTile 关于弹窗 import 'package:flutter/material.dart'; class <a href="https://www.cnblogs.com/rogerwu/p/16325818.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16312804.html
Flutter 路由 - rogerwu
路由简介 Route 一个路由是一个屏幕或页面的抽象 Navigator 管理路由的组件,Navigator 可以通过路由入栈和出栈来实现页面之间的跳转 常用属性: initialRoute:初始路由,即默认页面 onGenerateRoute:动态路由(根据规则,匹配动态路由) onUnknown
2022-05-27T06:07:00Z
2022-05-27T06:07:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】路由简介 Route 一个路由是一个屏幕或页面的抽象 Navigator 管理路由的组件,Navigator 可以通过路由入栈和出栈来实现页面之间的跳转 常用属性: initialRoute:初始路由,即默认页面 onGenerateRoute:动态路由(根据规则,匹配动态路由) onUnknown <a href="https://www.cnblogs.com/rogerwu/p/16312804.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16293189.html
Flutter 状态管理 - rogerwu
StatefulWidget Flutter 中的组件,按状态划分: StatelessWidget(无状态组件) StatefulWidget(状态组件) 状态组件是包含可变状态的组件,状态的特点: (1)、当组件构建完成后,可同步读取 (2)、可以在组件的生命周期中改变 按状态作用域划分 组件内
2022-05-23T06:38:00Z
2022-05-23T06:38:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】StatefulWidget Flutter 中的组件,按状态划分: StatelessWidget(无状态组件) StatefulWidget(状态组件) 状态组件是包含可变状态的组件,状态的特点: (1)、当组件构建完成后,可同步读取 (2)、可以在组件的生命周期中改变 按状态作用域划分 组件内 <a href="https://www.cnblogs.com/rogerwu/p/16293189.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16284817.html
Flutter 常用的特殊组件 - rogerwu
1、Cupertino Cupertino -- iOS风格的组件 引用:import 'package:flutter/cupertino.dart'; 文档:https://flutter.cn/docs/development/ui/widgets/cupertino Material --
2022-05-18T07:21:00Z
2022-05-18T07:21:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】1、Cupertino Cupertino -- iOS风格的组件 引用:import 'package:flutter/cupertino.dart'; 文档:https://flutter.cn/docs/development/ui/widgets/cupertino Material -- <a href="https://www.cnblogs.com/rogerwu/p/16284817.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16257102.html
Flutter Scrolling widgets - rogerwu
默认情况下,布局组件内的子组件内容超出容器宽度时会出现一个溢出警告 import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key
2022-05-13T09:37:00Z
2022-05-13T09:37:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】默认情况下,布局组件内的子组件内容超出容器宽度时会出现一个溢出警告 import 'package:flutter/material.dart'; class Home extends StatelessWidget { const Home({Key? key}) : super(key: key <a href="https://www.cnblogs.com/rogerwu/p/16257102.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16254373.html
Flutter 基础 widgets --Image - rogerwu
Image.asset() 加载本地图片 使用步骤: (1)、Flutter 项目下,创建图片存储目录 (2)、在 pubspec.yaml 中的 flutter 部分添加图片配置 (3)、在代码中加载图片 import 'package:flutter/material.dart'; class
2022-05-10T09:12:00Z
2022-05-10T09:12:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】Image.asset() 加载本地图片 使用步骤: (1)、Flutter 项目下,创建图片存储目录 (2)、在 pubspec.yaml 中的 flutter 部分添加图片配置 (3)、在代码中加载图片 import 'package:flutter/material.dart'; class <a href="https://www.cnblogs.com/rogerwu/p/16254373.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rogerwu/p/16253933.html
Flutter 基础 widgets --Button - rogerwu
TextButton(文本按钮) 用法: (1)、TextButton() 创建普通的文本按钮 (2)、TextButton.icon() 创建一个带图标的文本按钮 属性: child:Widget,必填,按钮内容 onPressed:void Function(),必填,点击事件 style: B
2022-05-10T07:55:00Z
2022-05-10T07:55:00Z
rogerwu
https://www.cnblogs.com/rogerwu/
【摘要】TextButton(文本按钮) 用法: (1)、TextButton() 创建普通的文本按钮 (2)、TextButton.icon() 创建一个带图标的文本按钮 属性: child:Widget,必填,按钮内容 onPressed:void Function(),必填,点击事件 style: B <a href="https://www.cnblogs.com/rogerwu/p/16253933.html" target="_blank">阅读全文</a>