![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
RN
文章平均质量分 79
snow51
Day day study!Day day up!
展开
-
rn适配手机屏幕
适配手机屏幕,宽、高、字体'use strict';import React from 'react';import {Dimensions, PixelRatio, Platform} from 'react-native';var uiWidth = 375;var uiHeight= 667;//这里的值,是设计稿中的高度iphone6var pixel= 1 / PixelR...原创 2019-10-10 09:43:48 · 735 阅读 · 0 评论 -
RN 组件 DeviceEventEmitter 发送和接收事件
// 导入组件后,发送一个notice事件// DeviceEventEmitter.emit('自定义名称',发送数据);DeviceEventEmitter.emit('notice', '你有新的消息,请及时查收');// 接收notice事件componentDidMount(){ this.deEmitter = DeviceEventEmitter.addListen...原创 2018-06-28 14:02:55 · 1355 阅读 · 0 评论 -
RN 组件 react-native-swiper 轮播图
安装组件依赖包:https://www.npmjs.com/package/react-native-swiperSwiper 组件的使用@常用属性 以下属性值均为默认值render(){ return ( <Swiper style={styles.wrapper} width = {200} ...原创 2018-06-01 18:53:13 · 2517 阅读 · 1 评论 -
RN 侧滑删除 react-native-swipe-list-view
react-native-swipe-list-view 侧滑删除组件 包含两个子组件:SwipeListView 和 SwipeRow 一、SwipeListView —-是基于listview封装的具有侧滑打开、关闭功能的listview组件。目前也支持FlatList和SectionList。 import {SwipeListView} from ‘react-native-swip...原创 2018-06-15 17:32:46 · 2888 阅读 · 0 评论 -
事件埋点
RN react-native-talkingdata // 安装npm install react-native-talkingdata --save// 引入import * as TD from 'react-native-talkingdata';// 使用apiTD.trackPageBegin(page_name)TD.trackPageEnd(page_name)...原创 2018-06-22 18:22:39 · 911 阅读 · 0 评论 -
关于Warning: setState(...):
关于Warning: setState(…): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op.的解决方案关于react中切换路由时报以上错误,实际的原因是因为在组件挂载(mou...原创 2018-06-22 16:22:14 · 579 阅读 · 0 评论 -
RN 获取数据的过程
RN 获取数据的过程 @过程// 在第一次render渲染dom后就可以操作JS了componentDidMount(){ this.getInfo();}// 获取数据getInfo(){ let that = this; //保存该组件,后面的数据请求this的指向不确定 let params = { "requestApi": "后...原创 2018-05-31 20:29:56 · 1327 阅读 · 0 评论 -
RN 列表组件之三 FlatList
RN 列表组件之三 FlatList如果需要分组/类/区,就使用SectionLIst;基于VirtualizedList 组件的封装@FlatList 组件的属性&amp;amp;amp;amp;lt;FlatList ref = 'flatList' // this.refs.flatList 获取到该组件 data = {[{name: '小米'},{name: '小兵'}]} //...原创 2018-05-31 11:02:58 · 3229 阅读 · 0 评论 -
RN 列表组件之一 ScrollView
RN 列表组件之一 ScrollView滑动视图组件// 常用的属性,不常用的到时候看源码render(){ <View style={{flex:1}}> <ScrollView horizontal = 'true', //默认为false 垂直滚动;true水平滚动 showsHori...原创 2018-05-30 20:11:41 · 1665 阅读 · 0 评论 -
RN 集成极光推送 jpush-react-native
jpush-react-native —-是极光推送官方开发的 React Native 版本插件,可以快速集成推送功能。import JPushModule from 'jpush-react-native';if (Platform.OS === 'android') {// 通知 JPushModule 初始化完成,发送缓存事件。 JPushModule.notifyJS...原创 2018-06-28 14:58:44 · 2231 阅读 · 0 评论 -
RN 组件 Linking
Linking ——提供了一个通用的接口来与传入和传出的App链接进行交互addLinkingListener() { // 处理链接:如果你的应用被其注册过的外部url调起,则可以在任何组件内这样获取和处理它 Linking.getInitialURL().then(url => { if (url) { console.log('Initi...原创 2018-06-28 15:11:54 · 1282 阅读 · 0 评论 -
RN 打android离线包生成apk文件
第一步:生成离线bundle包react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.bundlejs --assets-dest android/app/src/main/res参数: -h, –...原创 2018-09-01 16:58:48 · 1374 阅读 · 0 评论 -
rn升级0.60.5遇到的问题
1、Could not get unknown property ‘mergeResourcesProvider’ for object of type com.android.build.gradle原因:react.gradle文件中调用了比较新的API : variant是gradle android插件中的ApplicationVariantImpl类的对象,它的属性本来叫mergeRe...原创 2019-09-23 14:30:26 · 973 阅读 · 0 评论 -
Android-Studio 运行报错
1、Execution failed for task ‘:react-native-update:compileDebugNdk’路径:android->app->build.gradlewandroid { sourceSets.main { jni.srcDirs = [] }}路径:android->gradle.properti...原创 2019-06-12 11:36:57 · 274 阅读 · 0 评论 -
XCode 运行报错
The operation couldn’t be completed.操作无法完成:更新开发者账号Xcode --> Preferences --> Accounts --> Apple ID 左下角加号➕ --> Add Apple ID --> 输入对应的该项目所用到的开发者账号和密码–>登录,再去点击 Download Manual Profil...原创 2019-05-14 14:44:23 · 1812 阅读 · 0 评论 -
react-native
React Native 是由Facebook发布的开源框架,React Native 的宗旨是,学习一次,高效编写跨平台原生应用;##React Native 与 native如何交互注:函数不能有返回值,因为被调用的原生代码是异步的,原生代码执行结束之后只能通过回调函数或者发送消息给rn那边1、React Native的RCTDeviceEventEmitter,通过消息机制来实现 ...原创 2019-05-09 11:02:54 · 311 阅读 · 0 评论 -
NativeModules--bridge
以Talkingdata为例:1.初始化项目Android1)创建一个java类(导包 alt/option + enter) ComTalkingdataModule.javapackage com.reactlibrary;import android.content.Context;import com.facebook.react.bridge.ReactApplica...原创 2019-04-28 17:12:41 · 266 阅读 · 0 评论 -
安装/卸载:
安装:1,正确的安装方式是 npm install xxx --save,经常看到许多组件安装文档上后面没有 --save,如果没有建议加上 否则组件信息不会出现在package.json中,导入组件的时候可能会找不到路径。2,安装完成后执行一下 react-native link xxx。卸载:1,在卸载之前先执行 react-native unlink xxx。2,然后在执行 npm...原创 2019-01-10 14:20:07 · 112 阅读 · 0 评论 -
npm 常用命令整理
NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。npm install 安装模块,默认会安装最新的版本npm i ‘moduleName’@1.0.0 -s 安装包信息将加入到dependencies(生产阶段的依赖)npm uninstall 卸载模块n...原创 2019-08-05 11:40:58 · 6655 阅读 · 0 评论 -
RN 0.50.3 版本bug
RN 0.50.3 trying to set local data for view with unknown tag解决办法有2种一 是通过升级版本解决;二 是大多数人采用的,通过打补丁的方式,即修改源码,然后重新编译。官方给出:ReactAndroid/src/main/java/com/facebook/react/uimanager/UIImplementation.java...原创 2018-11-20 14:36:51 · 234 阅读 · 0 评论 -
RN 认识state 、props
认识RN中的state@在RN中,系统会持续监控state,组件用state作为数据来源,当state属性值发生改变时,组件就会发生重绘,触发render()方法,渲染UI界面。数据变化后调用this.setState()改变state属性值来更新界面(非及时)。$state是做什么的1、主要是用于存储组件自身需要的数据,是组件私有的数据 2、一般通过修改state属性的值来更新...原创 2018-05-30 19:14:37 · 1740 阅读 · 0 评论 -
RN 列表组件之二 SectionList
RN 列表组件之一 SectionList#原创 2018-05-30 14:20:11 · 1189 阅读 · 0 评论 -
RN API之一 AsyncStorage
AsyncStorageAsyncStorage 是一个简单的、具有异步特性的键值对的存储系统,用于全局,替代localStorage。#所有方法都有一个回调函数,执行后,都会返回一个Promise对象案例:判断首次渲染import { AsyncStorage } from 'react-native';class GetSetStorge { /** ...原创 2018-06-05 17:00:15 · 281 阅读 · 0 评论 -
RN 组件accessibility ActivityIndicator CheckBox
accessible (iOS, Android | 无障碍元素)设置为true时表示当前视图是一个“无障碍元素”(accessibility element)。无障碍元素会将其所有子组件视为一整个可以选中的组件。默认情况下,所有可点击的组件(Touchable系列组件)都是无障碍元素。&lt;View accessible={true}&gt; &lt;Text&gt;text ...原创 2018-05-28 20:47:16 · 718 阅读 · 0 评论 -
Rn 常见的六个组件学习
Rn 组件的学习TouchableOpacity | View | Text | Button | TextInput | Image&amp;amp;lt;TouchableOpacity activeOpacity= {0.7} disabled= {false} onPress = {() =&amp;amp;gt; {}} onLongPress= {() =&amp;amp;gt; {}}...原创 2018-05-28 20:21:50 · 2048 阅读 · 0 评论 -
RN 组件 ScrollView
RN 组件 ScrollView@属性 contentContainerStyle —–内层容器的样式 horizontal —-默认为false,垂直滚动 keyboardDismissMode —–默认为none,用户拖拽是否隐藏软键盘;on-drag 当拖拽开始的时候隐藏软键盘;interactive 软键盘伴随拖拽操作同步地消失,并且如果往上滑动会恢复键盘。安卓设备上不支持这个选...原创 2018-06-11 16:19:59 · 752 阅读 · 0 评论 -
RN 列表组件之四 ListView
ListView,在react-native 版本0.46被弃用了!@属性整理(可以使用所有ScrollView的属性)rowHasChanged —–当行数据放生变化时,只更新变化的行数据pageSize ———-限制频率的行渲染dataSource ——–列表的数据源1、创建ListViewDataSource对象,并用其进行数据变更的比较。 const ds ...原创 2018-06-11 15:21:26 · 1796 阅读 · 0 评论 -
RN 中的常用的未整理的组件
1、NativeModules 原生的 2、DeviceEventEmitter 利用DeviceEventEmitter解决标题栏和数据列表联动问 https://blog.csdn.net/Jason847/article/details/78319604原创 2018-06-11 14:15:07 · 345 阅读 · 0 评论 -
RN 多个rn项目如何同时运行
临时修改运行端口:react-native start –port=8082; 然后再运行项目永久修改端口:你的项目名称/node_modules/react-native/local-cli/server/server.js第二步:修改iOS项目的端口号在修改了React Native 服务的端口号之后,我们要需改iOS项目的端口号让它从新端口获取jsbundle,否则的话...原创 2018-06-04 10:40:19 · 1197 阅读 · 0 评论 -
react-native-autoheight-webview || An auto height webview for React Native.
react-native-autoheight-webviewnpm install react-native-autoheight-webview –save (rn >= 0.47)npm install react-native-autoheight-webview@0.3.1 –save (0.44 <= rn < 0.47)npm install rea...原创 2018-06-04 10:02:55 · 1737 阅读 · 0 评论 -
RN 布局篇 FlexBox
RN 布局篇 FlexBox之前整理过css中的的弹性布局,今天想总结下RN在使用弹性布局时的区别react-native中有四个父级容器属性,2个项目属性容器属性:flexDirection、justifyContent、alignItems、flex-wrap 项目属性:flex、alignSelf#容器属性1:flexDirection: column(默认值) | r...原创 2018-05-29 20:10:24 · 357 阅读 · 0 评论 -
RN 布局篇 LayoutPropTypes.js
解析RN样式依赖包的文件依赖包的文件地址:react-native/Libraries/StyleSheet/LayoutPropTypes.js// 显示隐藏,默认属性是flexdisplay: none,display: flex,// 宽高:值为数字或百分比,没有单位width: 100,height: 20%,left: 5,right: 5,top: 5,...原创 2018-05-29 20:52:15 · 450 阅读 · 0 评论 -
RN 组件 Animated
RN 组件 Animated可动画的视图包括View、Text、Image、createAnimatedComponent(自定义)只会简单的,后面再更 constructor(props) { super(props); this.state = { //这是动画效果 bounceValue: new Animated...原创 2018-06-05 18:03:11 · 480 阅读 · 0 评论 -
RN 组件 生命周期Lifecircle
为了合理开发,理理Lifecircle@1、创建阶段:创建组件类时// 初始化组件的默认属性defaultProps和属性类型propTypesstatic defaultProps = { autoPlay: false};static propTypes = { autoPlay: React.PropsTypes.bool.isRequired};// ...原创 2018-05-30 14:05:54 · 653 阅读 · 0 评论 -
RN与原生的交互
—-现在还不太懂这个,先码在这里—- 在写RN时不免会遇到与原生交互,下面我分JS调用原生、原生调用JS来讲JS调用原生在调用原生时,我们需要实现RCTBridgeModule和RCT_EXPORT_MODULE(); RCT_EXPORT_MODULE();则是一个宏定义,返回moduleName,并且调用+ load方法注册#define RCT_EXPORT_MODULE...转载 2018-06-06 11:58:41 · 832 阅读 · 0 评论 -
RN API之一 AppRegistry 应用的入口
RN API之一 AppRegistry 应用的入口@应用的根组件应当通过AppRegistry.registerComponent方法注册自己。只有注册了,node才会找到要执行的JS,加载运行bundle文件包。 @AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。 接口详情:静态方法 static 1、注册组件,参数一:Appkey...原创 2018-06-06 11:36:43 · 3566 阅读 · 0 评论 -
RN 组件 Modal 模态框遮罩层
RN 组件 Modal 模态框遮罩层#用来覆盖包含react-native根视图的根视图,实现遮罩层效果属性// 动画类型 slide从底部划入 /fade 从视野淡出animationType: none | fade | slide;// 决定背景是否透明,若为true,则出现透明遮罩层,若为false,则背景为灰色,无透明效果transparent : true ...原创 2018-05-30 10:54:00 · 5172 阅读 · 0 评论 -
RN 组件Dimensions 获取当前屏幕的宽高
Dimensions (英译:尺寸)$获取当前屏幕的宽高const { deviceWidth, deviceHeight } = Dimensions.get('window');@ 用途:屏幕尺寸的适配原创 2018-05-30 09:41:20 · 4524 阅读 · 1 评论 -
RN 样式篇 Shadow 阴影效果
RN 样式篇 阴影效果 @属性 shadowColor —–阴影的颜色,颜色色值以rgba取色值 shadowOffset —-阴影的偏移量,{width:0, height:2} shadowOpacity —设置阴影的不透明度 shadowRadius —-设置阴影的模糊半径shadowStyle: { shadowColor: '#000', shadowOf...原创 2018-06-12 18:41:34 · 13864 阅读 · 0 评论 -
RN 组件之一 WebView
RN 组件之一 WebViewreact-native-autoheight-webviewlet {deviceWidth, deviceHeight} = Dimensions.get('window');&lt;WebView source={{url: 'https://github.com/facebook/react-native'}} //载入url或...原创 2018-06-04 09:45:33 · 587 阅读 · 0 评论