Flutter & React Native
文章平均质量分 57
主要介绍React Native & flutter的一些基本用法
码莎拉蒂 .
这个作者很懒,什么都没留下…
展开
-
Dart语言精简入门介绍
Dart语言精简入门介绍原创 2022-01-07 16:09:27 · 3327 阅读 · 0 评论 -
Flutter之Container的宽度如何设置为手机屏幕宽度
Flutter之Container的宽度如何设置为手机屏幕宽度原创 2021-12-27 20:16:13 · 3701 阅读 · 6 评论 -
Flutter提示之Navigator operation requested with a context that does not include a Navigator.
1 、问题用Flutter写了页面跳转,提示错误如下Navigator operation requested with a context that does not include a Navigator.2 、我的代码void main() { runApp(MyApp1());}class MyApp1 extends StatelessWidget { @override Widget build(...原创 2020-09-10 14:55:19 · 3369 阅读 · 0 评论 -
Flutter之Container
1、Container介绍我们先看它的构造方法 Container({ Key key, this.alignment, this.padding, //容器内补白,属于decoration的装饰范围 Color color, // 背景色 Decoration decoration, // 背景装饰 Decoration foregroundDecoration, //前景装饰 double width,//容器的宽度 doubl原创 2020-09-08 22:58:25 · 2189 阅读 · 0 评论 -
Flutter之ConstrainedBox、SizedBox、UnconstrainedBox(尺寸限制类容器)
1ConstrainedBox、SizedBox、UnconstrainedBox介绍1)、ConstrainedBox用于对子组件添加额外的约束。例如,如果你想让子组件的最小高度是80像素 ConstrainedBox({ Key key, @required this.constraints, Widget child, })我们可以看到这里有个constraints final BoxConstraints constraints;class.原创 2020-09-08 22:08:17 · 2582 阅读 · 0 评论 -
Flutter之Decoration
1、不废话,先爆照看效果2、Decoration介绍Flutter的Decoration可以设置:背景色 背景图 边框 圆角 阴影 渐变色 的等属性,有点像android里面的shape,Decoration 是基类,它的子类有下面这些BoxDecoration:实现边框、圆角、阴影、形状、渐变、背景图像 ShapeDecoration:实现四边分别指定颜色和宽度、底部线、矩形边色、圆形边色、体育场(竖向椭圆)、 角形(八边角)边色 Flutt...原创 2020-09-08 20:06:45 · 5207 阅读 · 0 评论 -
Flutter之Padding
1 、Padding介绍Padding用来为子元素添加填充,也就是指定子元素与容器边界的距离,作用基本上与Android中ViewGroup的padding属性差不多 const Padding({ Key key, @required this.padding, Widget child, }) : assert(padding != null), super(key: key, child: child);EdgeInsets提供了一些方法f原创 2020-09-07 21:54:59 · 6688 阅读 · 0 评论 -
Flutter之Center
1、Center介绍Center将子控件放在其内部中心,里面只能放一个child,但是child里面可以放ContainerCenter继承勒Align,然后Align默认是center.2、测试代码测试1、 @override Widget build(BuildContext context) { return MaterialApp( title: 'open url', ...原创 2020-09-07 21:24:53 · 2450 阅读 · 0 评论 -
Flutter之Align
1、Align介绍Align的作为一个参数,设置子child的对齐方式,比如居中,左上,右下等多个对齐方向2、部分源码和功能 const Align({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child, }) : assert(alignment != null)...原创 2020-09-07 20:40:44 · 2192 阅读 · 0 评论 -
Flutter之基本数据类型测试
1、Flutter的数据基本类型Dart语言里一切皆为对象,所以如果没有将变初始化,那么它的默认值为nullNumber(int、doubkle) String Boolean(bool) List Map2、测试代码 void testData() { //Number包含了int和double int a = 4; int b = 8; print(a + b); int a1; if...原创 2020-08-14 22:39:43 · 3041 阅读 · 0 评论 -
Flutter之测试Http和HttpClient
1测试Http和HttpClient 导入包:在pubspec.yaml里面导入 http: ^0.12.2 main.dart里面导入import 'package:http/http.dart' as http;import 'dart:convert';import 'dart:io';2 代码实现import 'package:flutter/material.dart';import 'package:...原创 2020-08-14 21:50:27 · 2490 阅读 · 0 评论 -
Flutter之点击按钮打开百度链接
1 需求点击按钮,打开百度链接2 代码实现import 'package:flutter/material.dart';import 'package:url_launcher/url_launcher.dart';void main() { runApp(MyApp1());}class MyApp1 extends StatelessWidget { @override Widget build(BuildContex...原创 2020-08-14 16:54:32 · 3140 阅读 · 0 评论 -
Flutter之运行提示Could not update files on device: Connection closed before full header was received
1 问题运行flutter app提示错误如下Performing hot restart...Syncing files to device MIX 3...Could not update files on device: HttpException: Connection closed before full header was received, uri = http://127.0.0.1:65054/-tzvW6oGieQ=/Restarted application in 1原创 2020-08-14 16:46:35 · 3707 阅读 · 0 评论 -
Flutter之导url_launcher包提示 A dependency may only have one source.
1、问题flutter项目在pubspec.yaml导入url_launcher包,然后点击Pub get错误提示如下F:\flutter_sdk\flutter\bin\flutter.bat --no-color pub getRunning "flutter pub get" in flutter_1... Error on line 25, column 5 of pubspec.yaml: A dependency may only hav原创 2020-08-14 16:04:12 · 2495 阅读 · 0 评论 -
Flutter之window系统下配置开发环境以及在Android Studio里面运行hello word
1 、window系统配置Flutter开发环境1)下载Flutter的SDK如果电脑安装了Git,直接到https://github.com/flutter/flutter/这里下载,但是需要翻墙git clone https://github.com/flutter/flutter.git或者到lutter官网下载https://flutter.dev/docs/development/tools/sdk/releases#windows2)更新环境变量 把我们下载好的f...原创 2020-08-12 22:39:52 · 2152 阅读 · 0 评论 -
React Native实现js调用安卓原生代码
1 问题 实现js调用安卓原始代码,直接上代码,简单粗暴2 代码实现 1) 实现一个继承ReactContextBaseJavaModule的类,MyToastModule.java文件如下public class MyToastModule extends ReactContextBaseJavaModule { public MyToastMod...原创 2018-09-16 00:29:25 · 6853 阅读 · 6 评论 -
React Native之didFocus和didBlur
1 didFocus和didBlur解释didFocus - the screen focused (if there was a transition, the transition completed)didBlur - the screen unfocused (if there was a transition, the transition completed)di...原创 2018-10-21 01:20:46 · 6782 阅读 · 2 评论 -
React Native之hardwareBackPress
1 hardwareBackPress我们用hardwareBackPress来监听手机物理返回键2 js那边常用写法BackHandler.addEventListener('hardwareBackPress', this._back);3 我们看下Android源代码分析是怎么触发到这里来的1) ReactActivity....原创 2018-10-25 23:49:46 · 4144 阅读 · 0 评论 -
React Native之react-native bundle --platform android --dev false --entry-file index.js --bundle失败
1 问题react native项目在assert目录下面生成index.android.bundle文件用下面的命令react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle...原创 2018-10-29 22:06:50 · 5132 阅读 · 0 评论 -
React Native之函数作为参数传递给另外一个函数去调用
1 用法我们一般喜欢把js里面的函数作为参数传递给另外一个函数,然后再调用这个函数,有点像C语言里面的函数指针2 代码测试写了一个函数,2个参数分别是函数,然后更具数据决定调用哪个函数/** * Sample React Native App * https://github.com/facebook/react-native * * @forma...原创 2018-11-01 23:30:47 · 5204 阅读 · 0 评论 -
React Native之(var和let区别 )(简单解构)(map对象遍历)(可变顺序参数和不可以变顺序参数函数)
1 var和let区别 let左右范围在块里面,var定义的变量可提升,用let声明的变量不可以声明2次2 简单解构let [a, b, c] = [1, 2, 3];3 map对象遍历 const map = new Map(); map.set('first', 'hello'); map.set('second', 'worl...原创 2018-10-10 21:16:45 · 3815 阅读 · 0 评论 -
React Native之导出
1 React Native里面一般导出函数或者常量或者组件 如果是默认组件或者类(export default修饰)的话,在另外一个地方导入的时候不需要加上{},格式如下 导出 export default class Student { } 导入 import Student from "./file" 如果不是默认组件或类或则方法或则变量(没有用de...原创 2018-10-16 21:09:08 · 2494 阅读 · 0 评论 -
React Native之js同步调用安卓原生方法@ReactMethod(isBlockingSynchronousMethod = true)
1 问题之前的代码js调用安卓原生都是用的异步方法,比如callback, promiss,异步的话,我们一般是在安卓原生有耗时操作,才用异步,如果我要离开返回,就需要js调用安卓同步方法利用callback实现js调用原生可以参考我的这篇博客React Native实现js调用安卓原生代码React Native之js调用Android原生使用Callback传递结果给js...原创 2018-09-20 21:41:25 · 7097 阅读 · 0 评论 -
node.js之npm
1 npm介绍npm是NodeJS一起安装的包管理工具2 常用命令1) 安装npmnpm install2) 查看npm版本npm -v比如我的ubuntu6.4.13 ) 升级npmnpm install npm -g4) npm安装模块,比如安装react-native 0.56版本npm install react-n...原创 2018-09-12 22:54:47 · 2427 阅读 · 0 评论 -
linux平台安装React Native遇到的坑
3年前我在windows平台安装过React Native,我一直都记忆犹新,那个时候facebook刚推出支持安卓,然后花了一天的时间在自己的window电脑上配置好了,还是很兴奋的,安装博客地址如下Android之Windows下搭建React Native Android开发环境(差不多搞了一天)现在我的开发环境是ubuntu,所以需要在这个平台安装react native,遇到的坑...原创 2018-09-11 20:21:12 · 2844 阅读 · 0 评论 -
React Native之js调用Android原生使用Callback传递结果给js
如果不清楚js如何调用Android原生,可以先参考我的这篇博客React Native实现js调用安卓原生代码1 问题上面的文章只是调用安卓原生显示Toast,但是我们一般会需要调用安卓的代码然后去拿回结果给js,但是我们知道在android层js调用的这个函数返回值必须的void,所以我们需要用到Callback,这里先说Callback @ReactMe...原创 2018-09-16 23:54:49 · 5058 阅读 · 0 评论 -
React Native之提示Unable to load script from assets ‘index.android.bundle
1 问题Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager ser ver.2 分析在android的...原创 2018-09-15 21:14:44 · 2720 阅读 · 0 评论 -
Android之React Native 中组件的生命周期
React Native 中组件的生命周期概述就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle)。所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命周期,是合理开发的关键。RN 组件的生命周期整理如下图:如图,可以把组件生命周期大致分为三个阶段:第一阶段:是组件第一次绘制转载 2015-11-16 20:08:47 · 2065 阅读 · 0 评论 -
Android之React native的介绍和入门指南
链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了!基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用原创 2015-10-26 22:55:42 · 7063 阅读 · 2 评论 -
Android之Windows下搭建React Native Android开发环境(差不多搞了一天)
最新情报0.12已经发布。很多原本需要手动修改BUG的部分很多已经不再需要。安装JDK从Java官网下载JDK并安装。请注意选择x86还是x64版本。推荐将JDK的bin目录加入系统PATH环境变量。安装Android SDK可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Andr原创 2015-10-27 14:43:29 · 22515 阅读 · 60 评论 -
React Native之Props(属性)和State(状态)和简单样式简单使用
1 Props(属性)和State(状态)和简单样式简单使用App.js代码如下/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Pla...原创 2018-09-26 22:20:36 · 2297 阅读 · 0 评论 -
React Native之编译提示Only one default export allowed per module.
1 问题部分代码如下class HomeScreen extends React.Component { render() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Scre...原创 2018-10-11 20:36:49 · 10576 阅读 · 0 评论 -
React Native之触摸事件(Touchable系列和onLongPress)
1 触摸事件普通点击我们可以使用onPress方法,我们可以使用Touchable 系列控件设计我们的按钮TouchableHighlight 背景会在用户手指按下时变暗TouchableNativeFeedback用户手指按下时形成类似墨水涟漪的视觉效果TouchableOpacity指按下时降低按钮的透明度,而不会改变背景的颜色TouchableWithoutFeedbac...原创 2018-10-09 22:50:35 · 5882 阅读 · 0 评论 -
React Native之组件(Component)生命周期学习笔记
1、Component介绍一般Component需要被其它类进行继承,Component和Android一样,也有生命周期英文图片如下2 具体说明1)、挂载阶段constructor()//构造函数,声明之前先调用super(props)componentWillMount()//因为它发生在render()方法前,因此在该方法内同步设置状态...原创 2018-10-16 00:59:57 · 2459 阅读 · 0 评论 -
React Native之通过DeviceEventEmitter发送和接收事件
1 怎么实现发送和接收事件理论上封装了Android原生广播的代码,需要注册和反注册,这里用DeviceEventEmitter实现//增加监听DeviceEventEmitter.addListener//取消监听//this.emitter.remove();这里可也可以通过安卓原生向页面js发送消息,可以参考我的这篇博客React Native之Android原生通过Dev...原创 2018-10-15 23:46:38 · 5604 阅读 · 0 评论 -
React Native之内部方法常用几种写法和调用规则
1 简单部分代码export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <View style={styles.welcome}> &l...原创 2018-09-29 22:34:44 · 4067 阅读 · 0 评论 -
React Native之最构建对象通过构造方法传递值然后再获取值
1 问题在一个文件构建一个对象,然后在另外一个文件里面new这个对象,通过构造方法传递参数,然后再获取这个参数2 测试代码Student.js文件如下'use strict';import React from 'react'import {NativeModules, NativeEventEmitter, DeviceEventEmitter,Ale...原创 2018-10-14 22:06:27 · 3001 阅读 · 0 评论 -
React Native之通过createStackNavigator实现携带参数的页面与页面之间的跳转
1 实现的功能在网上看React Native文档,我特码就想实现一个页面到另外一个页面的跳转,然后另外一个页面怎么获取参数,特么没找到一个说清楚的,要么太复杂,要么说了不理解,下面是我自己写的一个App.js文件,实现一个Home页面跳到另外Details页面,并且携带了参数怎么在Details页面获取,就是这么简单粗暴.2 测试DemoApp.js文件如下...原创 2018-10-13 20:54:53 · 3994 阅读 · 0 评论 -
React Native之Flexbox布局和监测文本输入onChangeText
1 Flexbox布局1) flexDirection 可以决定布局的主轴,子元素是应该沿着水平轴(row)方向排列,还是沿着竖直轴(column)方向排列2) justifyContent 决定其子元素沿着次轴(与主轴垂直的轴,比如若主轴方向为row,则次轴方向为column)的排列方式 有flex-start、center、flex-end、space-around...原创 2018-09-27 23:35:35 · 2646 阅读 · 0 评论 -
React Native之Android原生通过DeviceEventEmitter发送消息给js
1 问题Android原生向js发消息,并且可以携带数据2 实现原理Android原生可以使用RCTEventEmitter来注册事件,然后这里需要指定事件的名字,然后在js那端进行监听同样事件的名字监听,就可以收到消息得到数据Android注册关键代码reactContext.getJSModule(DeviceEventManagerModule.RCT...原创 2018-09-21 22:54:15 · 7048 阅读 · 3 评论