刘荣丹的日志

适配手机屏幕，宽、高、字体'use strict';import React from 'react';import {Dimensions, PixelRatio, Platform} from 'react-native';var uiWidth = 375;var uiHeight= 667;//这里的值，是设计稿中的高度iphone6var pixel= 1 / PixelR...

// 导入组件后，发送一个notice事件// DeviceEventEmitter.emit('自定义名称',发送数据);DeviceEventEmitter.emit('notice', '你有新的消息，请及时查收');// 接收notice事件componentDidMount(){ this.deEmitter = DeviceEventEmitter.addListen...

安装组件依赖包：https://www.npmjs.com/package/react-native-swiperSwiper 组件的使用@常用属性 以下属性值均为默认值render(){ return ( <Swiper style={styles.wrapper} width = {200} ...

react-native-swipe-list-view 侧滑删除组件 包含两个子组件：SwipeListView 和 SwipeRow 一、SwipeListView —-是基于listview封装的具有侧滑打开、关闭功能的listview组件。目前也支持FlatList和SectionList。 import {SwipeListView} from ‘react-native-swip...

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)...

关于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...

RN 获取数据的过程 @过程// 在第一次render渲染dom后就可以操作JS了componentDidMount(){ this.getInfo();}// 获取数据getInfo(){ let that = this; //保存该组件，后面的数据请求this的指向不确定 let params = { "requestApi": "后...

RN 列表组件之三 FlatList如果需要分组/类/区，就使用SectionLIst；基于VirtualizedList 组件的封装@FlatList 组件的属性<FlatList ref = 'flatList' // this.refs.flatList 获取到该组件 data = {[{name: '小米'},{name: '小兵'}]} //...

RN 列表组件之一 ScrollView滑动视图组件// 常用的属性，不常用的到时候看源码render(){ <View style={{flex:1}}> <ScrollView horizontal = 'true', //默认为false 垂直滚动；true水平滚动 showsHori...

jpush-react-native —-是极光推送官方开发的 React Native 版本插件，可以快速集成推送功能。import JPushModule from 'jpush-react-native';if (Platform.OS === 'android') {// 通知 JPushModule 初始化完成，发送缓存事件。 JPushModule.notifyJS...

Linking ——提供了一个通用的接口来与传入和传出的App链接进行交互addLinkingListener() { // 处理链接:如果你的应用被其注册过的外部url调起，则可以在任何组件内这样获取和处理它 Linking.getInitialURL().then(url => { if (url) { console.log('Initi...

第一步：生成离线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, –...

1、Could not get unknown property ‘mergeResourcesProvider’ for object of type com.android.build.gradle原因：react.gradle文件中调用了比较新的API ： variant是gradle android插件中的ApplicationVariantImpl类的对象，它的属性本来叫mergeRe...

1、Execution failed for task ‘:react-native-update:compileDebugNdk’路径：android->app->build.gradlewandroid { sourceSets.main { jni.srcDirs = [] }}路径：android->gradle.properti...

The operation couldn’t be completed.操作无法完成：更新开发者账号Xcode --> Preferences --> Accounts --> Apple ID 左下角加号➕ --> Add Apple ID --> 输入对应的该项目所用到的开发者账号和密码–>登录，再去点击 Download Manual Profil...

React Native 是由Facebook发布的开源框架，React Native 的宗旨是,学习一次,高效编写跨平台原生应用;##React Native 与 native如何交互注：函数不能有返回值，因为被调用的原生代码是异步的，原生代码执行结束之后只能通过回调函数或者发送消息给rn那边1、React Native的RCTDeviceEventEmitter，通过消息机制来实现 ...

以Talkingdata为例：1.初始化项目Android1）创建一个java类(导包 alt/option + enter) ComTalkingdataModule.javapackage com.reactlibrary;import android.content.Context;import com.facebook.react.bridge.ReactApplica...

安装：1，正确的安装方式是 npm install xxx --save，经常看到许多组件安装文档上后面没有 --save，如果没有建议加上 否则组件信息不会出现在package.json中，导入组件的时候可能会找不到路径。2，安装完成后执行一下 react-native link xxx。卸载：1，在卸载之前先执行 react-native unlink xxx。2，然后在执行 npm...

NPM的全称是Node Package Manager，是随同NodeJS一起安装的包管理和分发工具，它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。npm install 安装模块，默认会安装最新的版本npm i ‘moduleName’@1.0.0 -s 安装包信息将加入到dependencies（生产阶段的依赖）npm uninstall 卸载模块n...

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...

认识RN中的state@在RN中，系统会持续监控state，组件用state作为数据来源，当state属性值发生改变时，组件就会发生重绘，触发render()方法，渲染UI界面。数据变化后调用this.setState()改变state属性值来更新界面(非及时)。$state是做什么的1、主要是用于存储组件自身需要的数据，是组件私有的数据 2、一般通过修改state属性的值来更新...

RN 列表组件之一 SectionList#

AsyncStorageAsyncStorage 是一个简单的、具有异步特性的键值对的存储系统，用于全局，替代localStorage。#所有方法都有一个回调函数，执行后，都会返回一个Promise对象案例：判断首次渲染import { AsyncStorage } from 'react-native';class GetSetStorge { /** ...

accessible (iOS, Android | 无障碍元素)设置为true时表示当前视图是一个“无障碍元素”（accessibility element）。无障碍元素会将其所有子组件视为一整个可以选中的组件。默认情况下，所有可点击的组件（Touchable系列组件）都是无障碍元素。<View accessible={true}> <Text>text ...

Rn 组件的学习TouchableOpacity | View | Text | Button | TextInput | Image<TouchableOpacity activeOpacity= {0.7} disabled= {false} onPress = {() => {}} onLongPress= {() => {}}...

RN 组件 ScrollView@属性 contentContainerStyle —–内层容器的样式 horizontal —-默认为false，垂直滚动 keyboardDismissMode —–默认为none，用户拖拽是否隐藏软键盘；on-drag 当拖拽开始的时候隐藏软键盘；interactive 软键盘伴随拖拽操作同步地消失，并且如果往上滑动会恢复键盘。安卓设备上不支持这个选...

ListView，在react-native 版本0.46被弃用了!@属性整理（可以使用所有ScrollView的属性）rowHasChanged —–当行数据放生变化时，只更新变化的行数据pageSize ———-限制频率的行渲染dataSource ——–列表的数据源1、创建ListViewDataSource对象，并用其进行数据变更的比较。 const ds ...

1、NativeModules 原生的 2、DeviceEventEmitter 利用DeviceEventEmitter解决标题栏和数据列表联动问 https://blog.youkuaiyun.com/Jason847/article/details/78319604

临时修改运行端口：react-native start –port=8082; 然后再运行项目永久修改端口：你的项目名称/node_modules/react-native/local-cli/server/server.js第二步：修改iOS项目的端口号在修改了React Native 服务的端口号之后，我们要需改iOS项目的端口号让它从新端口获取jsbundle，否则的话...

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...

RN 布局篇 FlexBox之前整理过css中的的弹性布局，今天想总结下RN在使用弹性布局时的区别react-native中有四个父级容器属性，2个项目属性容器属性：flexDirection、justifyContent、alignItems、flex-wrap 项目属性：flex、alignSelf#容器属性1：flexDirection: column(默认值) | r...

解析RN样式依赖包的文件依赖包的文件地址：react-native/Libraries/StyleSheet/LayoutPropTypes.js// 显示隐藏，默认属性是flexdisplay: none,display: flex,// 宽高：值为数字或百分比，没有单位width: 100,height: 20%,left: 5,right: 5,top: 5,...

RN 组件 Animated可动画的视图包括View、Text、Image、createAnimatedComponent(自定义)只会简单的，后面再更 constructor(props) { super(props); this.state = { //这是动画效果 bounceValue: new Animated...

为了合理开发，理理Lifecircle@1、创建阶段：创建组件类时// 初始化组件的默认属性defaultProps和属性类型propTypesstatic defaultProps = { autoPlay: false};static propTypes = { autoPlay: React.PropsTypes.bool.isRequired};// ...

—-现在还不太懂这个，先码在这里—- 在写RN时不免会遇到与原生交互，下面我分JS调用原生、原生调用JS来讲JS调用原生在调用原生时，我们需要实现RCTBridgeModule和RCT_EXPORT_MODULE(); RCT_EXPORT_MODULE();则是一个宏定义，返回moduleName，并且调用+ load方法注册#define RCT_EXPORT_MODULE...

RN API之一 AppRegistry 应用的入口@应用的根组件应当通过AppRegistry.registerComponent方法注册自己。只有注册了，node才会找到要执行的JS,加载运行bundle文件包。 @AppRegistry模块则是用来告知React Native哪一个组件被注册为整个应用的根容器。 接口详情：静态方法 static 1、注册组件,参数一：Appkey...

RN 组件 Modal 模态框遮罩层#用来覆盖包含react-native根视图的根视图，实现遮罩层效果属性// 动画类型 slide从底部划入 /fade 从视野淡出animationType: none | fade | slide;// 决定背景是否透明，若为true，则出现透明遮罩层，若为false，则背景为灰色，无透明效果transparent : true ...

Dimensions （英译：尺寸）$获取当前屏幕的宽高const { deviceWidth, deviceHeight } = Dimensions.get('window');@ 用途：屏幕尺寸的适配

RN 样式篇 阴影效果 @属性 shadowColor —–阴影的颜色，颜色色值以rgba取色值 shadowOffset —-阴影的偏移量,{width:0, height:2} shadowOpacity —设置阴影的不透明度 shadowRadius —-设置阴影的模糊半径shadowStyle: { shadowColor: '#000', shadowOf...

RN 组件之一 WebViewreact-native-autoheight-webviewlet {deviceWidth, deviceHeight} = Dimensions.get('window');<WebView source={{url: 'https://github.com/facebook/react-native'}} //载入url或...