react-native
使用 React 来创建 Android 和 iOS 的原生应用
Jedi Hongbin
hongbin.xyz meta.hongbin.xyz kmyc.hongbin.xyz
展开
-
egg.js. demo
丑团git前端 expo https://gitee.com/honbingitee/ugly-tuan-expo后端 egg.js https://gitee.com/honbingitee/ugly-tuan-egg/* eslint-disable indent */'use strict';const Controller = require('egg').Controller;const mongoose = require("mongoose");class CommentC原创 2021-11-02 13:53:46 · 220 阅读 · 0 评论 -
react native 全局变量设置
import './polyfills';⬇️import { t } from './helpers/translate';// eslint-disable-next-line @typescript-eslint/no-explicit-any((global: any) => { global.t = t;})(typeof window === 'undefined' ? global : window);原创 2021-02-27 17:50:05 · 858 阅读 · 0 评论 -
Error: Function components cannot have refs. Did you mean to use React.forwardRef()
调用函数式组件想要像平常一样使用ref时出现了这个问题解决: forwardRef, useImperativeHandle, useRef使用可以自定义返回给父组件ref哪些属性可以使用useimperativehandle原创 2021-01-24 18:38:32 · 1155 阅读 · 0 评论 -
pod install 各种报错记录
pod 'boost-for-react-native', :git => 'https://gitee.com/mirrors/boost-for-react-native.git'target 'xstore' do use_unimodules! config = use_native_modules! pod 'boost-for-react-native', :git => 'https://gitee.com/mirrors/boost-for-react-nati原创 2021-01-19 09:48:04 · 1339 阅读 · 0 评论 -
react-native云服务直播方案
支持RN的云直播服务很少国内大都是android和ios的SDK,没找到支持RN的SDK,又没有能力自己封装难受????1, 使用阿里云或者任何云服务,服务端生成推流地址,app中使用 react-native-nodemediaclient 推流无法使用云服务SDK的美颜 特效 滤镜 等功能,无奈之选2,使用 react-native-bambuser-broadcaster 可以与react-native或退出expo的项目使用国外的一个老牌公司,早在在04年YouTube上就有他们的直播服务视原创 2021-01-08 17:51:54 · 779 阅读 · 0 评论 -
react native 指定版本创建项目
react-native init demo --verbose --version 0.60.0指定后面版本号即可原创 2021-01-07 13:59:12 · 985 阅读 · 1 评论 -
ReactNative Tried to register two views with the same name RNCViewPager
因为有两个包用到了一个库,但是使用的版本不同改过来就好了可以参照 https://blog.csdn.net/sinat_30949835/article/details/107340683原创 2021-01-06 09:43:01 · 649 阅读 · 0 评论 -
aws-amplify-react-native null is not an object (evaluating ‘RNAWSCognito.compouteM
使用aws-amplify-react-native原来是托管expo项目,eject后登录时报了这个问题解决 安装amazon-cognito-identity-jsreact-native link amazon-cognito-identity-jscd iospod installok原创 2021-01-04 16:12:25 · 137 阅读 · 0 评论 -
Android ios RN开发环境问题
yarn android:java.lang.NoClassDefFoundError: Could not initialize class org.codehaus.groovy.vmplugin.v7.Java7Reason: zip END header not found Exception in thread "main" java.util.zip.ZipException: zip END header not foundin thread "main" java.net.Unkn原创 2021-01-02 09:47:51 · 173 阅读 · 0 评论 -
react native 直播试探之旅
第一次做直播功能,一次尝试使用腾讯云直播结果:android可以观看直播,有延迟ios:The server is not correctly configured. - The AVPlayerItem instance has failed with the error code -11850 and domain "AVFoundationErrorDomain".推流使用 obs1,推流地址可以先从腾讯云直播控制台生成2,推流,使用obs3,查看直播是否开始可以看预览4,拉流原创 2020-12-29 17:48:43 · 923 阅读 · 0 评论 -
react native 输入完文字自动聚焦到下一个输入框
思路:当输入到规定长度时,下一个输入框focusimport React, { useRef } from "react";import { TextInput, Text, StyleSheet } from "react-native";import { RowView } from "../../constants/styled";import { Subheading } from "react-native-paper";import { bold } from "../../sty.原创 2020-12-24 11:01:40 · 1220 阅读 · 0 评论 -
react-native 小坑坑
android 上keyboardWillShow不生效可以使用keyboardDidShow或者react-native-android-keyboard-adjustboxShadow:不能inset向内阴影ios:不能同overflow:“hidden”一起,建议设置点margin,有时会被周围的元素遮挡。android:不使用插件的情况只能使用elevation添加一个阴影无法设置偏移,但是会影响组件层级在设置了绝对定位情况下,比如elevation:10 层级的zIndex比 ele.原创 2020-11-16 16:04:00 · 388 阅读 · 0 评论 -
react 组件优化写法,减少渲染绑定
prev<Overlay isVisible={popupMenu.isVisible} onBackdropPress={() => setPopupMenu({ ...popupMenu, isVisible: false })} bgcOpacity={0.3} />curr<Overlay isVisible={popupMenu.isVisible} onBackdropPr原创 2020-11-10 11:07:39 · 249 阅读 · 0 评论 -
react native中将view固定在屏幕底部不被keyboard顶起
效果:<KeyboardAvoidingView style={styles.container} behavior="height" keyboardVerticalOffset={model === "android" ? -60 : -70} > {/* ... */}</KeyboardAvoidingView>或者监听键盘抬起时间进行元素的隐藏...原创 2020-11-02 14:57:47 · 1781 阅读 · 0 评论 -
记录依托AWS实现客服,即时通讯功能
实现方式:早起使用的是每个用户有聊天室和消息,监听新的聊天室的创建和消息的创建,经过一段时间功能增加发现这种方式并不好,更好的实现是每个用户相当于有一个收件箱,只要全局监听用户的收件箱就可使轻松实现,监听聊天室和新消息创建难以实现的功能。“apollo-link”: “^1.2.14”,“apollo-link-http”: “^1.5.17”,“aws-amplify”: “^3.3.1”,“aws-amplify-react-native”: “^4.2.6”,“aws-appsync”原创 2020-10-26 21:45:28 · 591 阅读 · 0 评论 -
正则,Yup 匹配数量,金额,name..
产品数量: ^[1-9]*[1-9][0-9]*$产品价格: (^[1-9][0-9]*$)|(^0.[0-9]+$)|(^[1-9][0-9]*.[0-9]+$)使用yupconst ValidationSchema = Yup.object().shape({ name: Yup.string().required("Required"), description: Yup.string() .min(10, "Minimun length of 10") .require原创 2020-10-17 19:27:58 · 1270 阅读 · 0 评论 -
react-apollo实现客服/聊天即时通讯功能
实现思路apollo是一个非常棒的库结合graphql使用非常便捷巧妙,有着良好的编程快感,不觉让人沉浸在其中,以下是实现及时通讯的思路使用:aws-appsync react-apollo graphQL首先全局全局包裹,也需要全局监听,实时的消息接收const client = new AWSAppSyncClient({ url, region, auth})<ApolloProvider client={client}> <App/><原创 2020-09-18 07:48:37 · 1197 阅读 · 0 评论 -
react-native 路由页面顶部返回箭头失效问题
如果你像我一样使用了路由监听例如: navigation.isFocused = () => { if (xxx) { // ... } };那么恭喜你只要在操作结尾加上return true即可解决这一问题 navigation.isFocused = () => { if (xxx) { // ... } return true; };...原创 2020-09-09 11:26:38 · 427 阅读 · 0 评论 -
react-native中使用TypeScript
基本类型定义 let str: string = "string"; let num: number = 123; let boo: boolean = true; let un: undefined = undefined; let nu: null = null;将非当前数据类型的值赋给该变量的时候会报错其他基本数据类型也是如此,如果需要一个可以变化数据类型的变量可以这样: let strOrNum: string | number = "str";原创 2020-09-03 21:43:27 · 1687 阅读 · 0 评论 -
Google Search Console验证
使用方式:将指定的 TXT 记录新增至 域名的 DNS 设定原创 2020-08-17 17:04:52 · 1149 阅读 · 0 评论 -
react-native精美展开菜单
代码拖拽小按钮import React from "react";import { Animated, PanResponder } from "react-native";import { FontAwesome5 } from "@expo/vector-icons";import styled from "styled-components";let iconTranslate = new Animated.ValueXY({ x: 0, y: 0 }); // 打开菜单的图标的位移.原创 2020-07-08 11:29:23 · 889 阅读 · 0 评论 -
react-native模板
expo升级SDK38后,原本创建项目时可选的导航模板变成了由typescript写的模板,于是自己还是js写一个,以下是效果地址https://github.com/tangmusenLiu/react-native-template原创 2020-07-07 12:30:41 · 467 阅读 · 0 评论 -
react-native音乐播放器
android效果 react-native音乐播放 ios区别:加载动画使用了lottie,android遇到闪退问题,没有使用动画功能:拖拽卡片选择专辑,卡片向下拖动可移除,下一张替换,点击卡片进入音乐列表,有此专辑的信息展示,一个点击打开或关闭的介绍,关闭时会自动滚动到介绍头部,音乐列表可点击播放对应音乐,点击左侧的播放图标功能一致,再次点击暂停音乐,再点击恢复播放,并用原创 2020-06-16 15:52:56 · 1401 阅读 · 0 评论 -
rn-函数式组件开启手势动画
import React, { useState, useLayoutEffect } from 'react'import { StyleSheet, Animated, PanResponder } from 'react-native'import { Container, Title } from '../styled/index'const TestAnimated = () => { const [lateX, setLateX] = useState(0) const [原创 2020-06-02 20:53:22 · 523 阅读 · 0 评论 -
rn自定义精美动画按钮组件
效果所谓的自定义指的是自定义按钮的大小,文字内容,背景颜色,两个小球的颜色小球的大小根据按钮的宽高变化,小球运动的终点是一个随机数的一个区间代码 用了style-component (尝试在函数式组件里写动画,果然很勉强)import React, { useState, useEffect } from 'react'import { Animated, TouchableNativeFeedback } from 'react-native'import styled from 'style原创 2020-06-02 12:51:16 · 612 阅读 · 0 评论 -
rn 函数式组件获取子组件的实例
class式组件要获取子组件的实例只要用ref就可以了,但是函数式组件就要复杂一点函数式组件要给子组件直接绑定ref是不成功的,要求子组件使用forward创建才可以,如下const ChildRefScreen = () => { const _a = useRef(null) return ( <View style={{ paddingTop: 40 }}> <A ref={_a} /> </View> )}c原创 2020-06-01 21:21:25 · 2457 阅读 · 0 评论 -
rn-lottie动画配合leanCloud制作用户登录注册页面
视频不到为啥闪了一下,用户账号注册用的是leanCloudhttps://www.leancloud.cn/存储,动画用的是lottieleanClodu使用注册账号,创建项目,react-native安装依赖yarn add leancloud-storage @leancloud/platform-adapters-react-native @react-native-community/async-storage-backend-legacy@^2.0.0-rc.3初始化import AV原创 2020-06-01 07:33:08 · 490 阅读 · 0 评论 -
react-native手势动画制作精美卡片拖拽效果
视频学习地址https://www.bilibili.com/video/BV1h7411o7zE代码import React, { Component } from 'react'import { StyleSheet, Text, View, PanResponder, Animated, Image, Dimensions} from 'react-native'import styled from 'styled-components'import Card.原创 2020-06-01 07:15:06 · 1379 阅读 · 0 评论 -
react-native抽奖转盘制作
一二一的代码import React, { Component } from 'react'import { View, TouchableWithoutFeedback, Animated, Easing } from 'react-native'import styled from 'styled-components'import { pxw, pxh } from '../px'import { Overlay } from 'react-native-elements'expo原创 2020-06-01 07:04:06 · 1204 阅读 · 3 评论 -
react-native仿写洛克王国手游版
首先声明此项目完全是出于学习和对洛克王国的喜爱而生,项目中使用的游戏宠物若涉及侵权请联系我前两天和朋友聊天说到洛克王国没有手游,正好最近在学习react-native,觉得可以尝试做下看看,于是做了仿制洛克王国有了下面的小游戏,实现了一些简单功能,不打算往下做了,要学点别的东西,有兴趣的朋友可以联系我我把项目打包的apk文件发给你试着玩一下,项目代码放在github上面> 地址功能展示第一次进入登录,选择宠物pk功能地图切换抓捕宠物就是以上...原创 2020-05-27 08:44:33 · 659 阅读 · 0 评论 -
react-native商城项目
react-native小demo 最近学习了一点基础的react后上手了react-native,上手不难就是写法适应了就好,对于这个小项目期间最大的收获就是:有一定基础了,就可以看官方文档了,别有问题就百度,百度上有些憨批写的东西因为版本或者内容本身有些问题,容易误事,比如我的这个项目在按照一些博客文章配置下打包后已经拉了,配置的啥也不知道,项目现在已经打不开了,掉了老夫一天的头发,...原创 2020-05-20 14:11:41 · 914 阅读 · 0 评论 -
react-native用户选择头像并保存本地
选择头像使用react-native-image-crop-picker保存本地用@react-native-community/async-storage下载使用跟正常插件一样,0.6以上版本不需要手动link选择头像并将头像信息传给存储方法:import ImagePicker from 'react-native-image-crop-picker';ImagePicker.openPicker({ width: 150, height: 200, cr原创 2020-05-15 14:22:21 · 600 阅读 · 0 评论 -
react-native调试攻略 -- Android Studio
这里使用的是Android Studio的模拟器,一下是模拟器和真机的调试总结从网页转到app不适应的一点就是网页经常控制台调试,而用了几天react-native感觉哪总说不上来的不舒服,后来对比发现我常用的调试用不了了,这就很难受,后来在网上看了很多的相关文章,在总结自己的使用经验有了以下的调试经验开发者菜单方法1在模拟器上按CTRL + M就可以打开开发者菜单方法2在命令行启动react-native项目时下面会有这么两句,意思在图上有标注在命令行输入d也可以打开模拟器的开发者菜单3原创 2020-05-12 06:17:08 · 2083 阅读 · 1 评论 -
写一个自己的react-native UI组件
刚开始学习react-native,感觉还是很爽的,其一便是组件化的感受(感觉比vue中的组件要有意思),在写一个小按钮的时候感觉当前组件的代码有点多,于是尝试把按钮单独抽离成一个组件,写着写着感觉这不就是一个小ui库吗????,等以后更多的常用组件写入,相信一个属于我的ui库就诞生了,目前我这个ui库叫HongUI,已经发布npm了,有兴趣的朋友可以下载看看,下面是我的ui库中仅有的HButton组件的介绍,如下引入一个HButton,不添加属性,样式:<HButton />传入一些原创 2020-05-10 09:19:08 · 525 阅读 · 0 评论 -
react-native利用Switch控制手机状态栏
样式``animated动画使用方式:比如要一个View组件产生动画效果用一个Animated.View组件代替View,里面正常写内容,然后需要发生变化的样式的值要用Animated.Value()指定,设置一个函数用来更改该样式的值来产生动画效果,如果要让View的宽度从100在1000毫秒内变成300可以这样//先定义一个值保存需要变化的样式的值this.state = { ...原创 2020-05-06 21:24:45 · 606 阅读 · 0 评论