book_1992的专栏

ios设备运行RN项目没有问题，当android设备运行时发现会立即闪退，经过排查后有两种原因造成：权限问题，没有获取到对应权限，即调用了一些权限代码（读取联系人）等。编译问题。解决方法：直接在设置里面设置应用权限后即可，但实际上应从代码逻辑上添加权限询问机制（逻辑）。移出build目录下的所有内容，build路径：项目名/android/app/build...

新建js文件：import React, { Component } from 'react';import { StyleSheet, Animated, Text, View, Modal, Easing } from 'react-native';import UiUtils from '../UiUtils';let utils = new UiUtils();utils.setHeightCalculateEnable(2224);const getDeviceValue = util

在react-native项目总添加 realm时，发现在iOS工程中无法下载realm-sync-cocoa，一直卡在：Installing RealmJS (10.1.3) > Running prepare command $ /bin/bash -c set -e ./scripts/xcode-download-realm.sh ./scripts Resolved requirements: { SYNC_SERVER_FOLDER: 'sync',

使用react-native-video作为播放器组件问退发现在安卓测试机上，在没有任何操作（开始播放等）的情况下，当App进入后台，然后重新返回前台时，video的画面会发生变化（帧数发生变化）。且进行一次后台返回前台的操作，都会发生变化，但并不是无限变化，大概最多维持在1s左右的帧画面。修复方案在ReactExoplayerView.java的onHostResume函数增加通知：this.themedReactContext.getJSModule(DeviceEventManagerMo

使用：route.params相关文档：https://reactnavigation.org/docs/params

能正常真机测试，但build的时候会失败（红色警告）升级xcode12后，项目在run debug时候是正常运行的，但是在build或者run release的时候就会出现如标题的红色错误。在网上找到解决方法：在Target-Build Settings-Excluded Architectures中添加以下代码EXCLUDED_ARCHS__EFFECTIVE_PLATFORM_SUFFIX_simulator__NATIVE_ARCH_64_BIT_x86_64=arm64 arm64e armv

官方提供的升级工具: https://react-native-community.github.io/upgrade-helper/?from=0.58.4&to=0.62.0打开网页就可以看到开头的提示信息：选择要升级的目标版本。查询本地RN版本指令：yarn react-native --version选择好要升级的版本后，点击下面的『show…』按钮，就可以看到要升级的对比文件了。只要耐心修改就行了，我是分开修改，先修改iOS相关文件，等到iOS能成功运行后再去修改android相关

原理：通过timeout将一个耗时操作分隔成若干个小的时间切片任务。步骤：创建queue队列（initPlayQueue）新建切片任务函数（addLibraryNoteCommand）点击操作后执行耗时任务（playLibraryNote）具体代码如下： addLibraryNoteCommand = (noteArray, taskPushTime, callBack) => { if (noteArray[0]) { if (taskPushTime !== t

组件的resizeMode不管设置stretch还是cover，都无法显示出全部图片，图片顶部和底部都有遮挡在放大组件高度后，观察到了图片的顶部和底部了。最后通过：https://stackoverflow.com/questions/39631895/how-to-set-image-width-to-be-100-and-height-to-be-auto-in-react-native设置了style中属性aspectRatio: image.width / image.height最终组件：

因为flatlist的item使用了图片，但item太多的时候，快速滑动列表，在部分性能较低的手机里面会发生闪屏现象。解决方法: 使用react-native-fast-image 代替Image 和ImageBackground

场景：使用react-native-view-shot，截屏获得N个base64的字符串，在不修改原逻辑的情况下，需要把其中一个截屏保留成本地图片，即把base64字符串写成本地图片。代码如下： _saveImageFromBase64Str = base64Str => { //因为截取的使用选择了'data-uri'的模式截取，所以字符串中含有"data:image/png;base64," //仅需逗号后面的字符串 let firstIdex = base64Str.index

直接使用SafeAreaView，在iOS端下可以把组件包裹在安全区域内，但有时候如果你不想SafeAreaView的区域限定在安全区域内，可以用下面的方法。首先注意，要使用从 ‘react-navigation’ 导出的SafeAreaView它有一个forceInset属性，可以控制是否增加safe inset，具体代码为<SafeAreaView style={styles.safeView} forceInset={{ top: 'ne

string.zh.json:"test_msg": "这是测试文字 = {{msg}}"string.en.json:"test_msg": "this is test msg = {{msg}}"在组件中使用，XXPage.js: Toast.showToast( t('test_msg', {msg: "test msg!!!!!"}), null, null, true, );...

使用setNativeProps的方式。

RN中使用的尺寸单位是dp使用PixelRatio进行适配，相关API：1.PixelRatio.roundToNearestPixel将布局大小(dp)四舍五入为与整数个像素对应的最近布局大小。例如，在PixelRatio为3的设备上PixelRatio.roundToNearestPixel(8.4) = 8.33，它恰好对应于（8.33 * 3）= 25像素不是将dp转化为px2.PixelRatio.getPixelSizeForLayoutSize将布局大小(dp)转换为像素大小(px

在 ios 端如果显示一个 Modal 的时候去打开一个新的 Modal 将无法打开。同时在一个页面里面存在两个以上 Modal 控件的时候，打开第三个 Modal 的时候页面会卡主。1.使用第三方： react-native-root-siblings 自定义封装。2.使用第三方：react-native-root-modal 的HelpModal组件代替Modal...

react-navigation：4.0.0代码：const AppNavigator = createStackNavigator( { .... xxxPage: { screen: xxxComponent, //只屏蔽单一页面 navigationOptions: {gesturesEnabled: false}, }, }, { initialRouteName: 'Home', headerMode: '

原代码：//data_protion_list：网络数据this.state = { data_protion_list:[], };//render: &lt;Swiper onIndexChanged = {this.onInd...

http://www.alex-arriaga.com/issue-when-running-npm-install-npm-err-cb-never-called-solved/

原帖：https://github.com/mmazzarolo/react-native-modal-datetime-picker DatePickerIOS选择24小时的方法：How to set 24 hours in iOS ?The is24Hour prop is only available on Android but you use a small hack...

解决方法：index 默认是0的，重新渲染的时候，需要把它设置成当前滑动到的index。比如你滑动了3page后，重新渲染，那么这个时候要把index设置成3.

ReactNative

问题：修改了state的某个属性后，重新渲染视图的时候发现FlatList并没有更新原帖：https://segmentfault.com/q/1010000009665332给FlatList指定extraData={this.state}属性，是为了保证state.selected变化时，能够正确触发FlatList的更新。如果不指定此属性，则FlatList不会触发更新，因为它是一个Pure...

//点击选项 onPressItem(i) { // Alert.alert(i.toString()) Alert.alert('点击：' + i.toString()) } renderChoose(key, i) { var bgColor = 'white'; if (this.state.chooseTag == i) { b...

http://www.jb51.net/article/90289.htmvar jmz = {};jmz.GetLength = function(str) {  return str.replace(/[\u0391-\uFFE5]/g,"aa").length;  //先把中文替换成两个字节的英文，在计算长度};

<TextInput style = {{flex: 1, backgroundColor: 'white'}}               placeHolder = "输入"              onChangeText = {(text) => this.setToken(text) }              />                           

import React, { Component, PureComponent } from 'react';import { View, TouchableOpacity, FlatList, Text, Alert,} from 'react-native';import styles from './style';import commonStyle from

react-native 学习环境安装：http://reactnative.cn/docs/0.48/getting-started.html#content更新npm:建议使用淘宝镜像：$ npm i -g npm --registry=https://registry.npm.taobao.org创建并运行项目：react-native init AwesomeP

ReactNative

添加依赖：https://reactnavigation.org/docs/navigators/stack/*TestScrene.js文件*/import React, { Component } from 'react';import { View, Image, Text, StyleSheet,} from 'react-native';export def

新建子类，通过继承RCTViewManager的方式，导出一个按钮或者自己自定义的view，点击这个view的时候触发分享方法如下：- (UIView *)view{  UIButton* button = [UIButtonnew];  [button addTarget:selfaction:@selector(testMethod)forControlEv

原因:因为是在Xcode里面新写的方法，如果直接刷新手机或者模拟器，那么这个方法是不存在的。解决：关闭程序，重新load一下程序。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, { Component } from 'react';import {  Platform,  StyleSheet,  Text,  View,  Te

注意检查Hardware菜单中，Keyboard选项下的"Connect Hardware Keyboard"是否被选中。

https://reactnative.cn/docs/0.51/linking.html#%E6%89%93%E5%BC%80%E5%A4%96%E9%83%A8%E9%93%BE%E6%8E%A5打开外部链接要启动一个链接相对应的应用（打开浏览器、邮箱或者其它的应用），只需调用：Linking.openURL(url).catch(err =>

解决：You should find this in .../node_modules/react-native-swiper/src/index.jscomponentWillReceiveProps (nextProps) { if (!nextProps.autoplay &amp;&amp; this.autoplayTimer) clearTimeout(this.au...

import React, { Component } from 'react';import PropTypes from 'prop-types';import { View, Image, StyleSheet, TouchableOpacity, Alert, Text} from 'react-native';import Size from '../C...

参考：http://blog.youkuaiyun.com/lvdezhou/article/details/72730079http://facebook.github.io/react-native/docs/textinput.html#selectionstate//实现点击view后，让被view包裹的textInput组件获取到焦点主要代码：//设置焦点onStartShouldSetRes...

//关键代码     _onChange(event) {         this.setState({              text_comments: event.nativeEvent.text,        });    }    onContentSizeChange(event) {       this.setState({          height_...

循环创建多个view：   &lt;View style = {styles.view_promotion}&gt;                &lt;View style = {styles.view_promotion_title}&gt;                        {this.state.title.map((key, i) =&gt; this.renderTitl...