React Native工作小技巧及填坑记录

• Z时代
• 2024-01-10
• 分类：综合

以下是本人在React Native开发工作中使用的一些小技巧,记录一下。

1.从网络上拉取下来的React Native缺少React和React Native库.

终端

1. cd 项目根目录

2. npm install

3. 完成之后,在根目录中会出现node_modules文件夹(和package.json同级目录).OK.接下来使用Xcode再次打开就好了.

2.如何导入第三方库.

1.cd 项目根目录

2.npm i 库名 --save

如: npm i react-native-tab-navigator --save      导入了react-native-tab-navigator这个库

3.获取屏幕的宽和高

使用Dimensions

var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window'); 

使用:

 leftViewStyle:{
        width:width/4,
    },

4.根据不同的平台设置不同的效果

使用Platform

先引入Platform:

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform
} from 'react-native';

　　使用:

    iconStyle:{
        width: Platform.OS === 'ios' ? 30 : 25,
        height:Platform.OS === 'ios' ? 30 : 25
    },

　5.颜色值使用RGB三色值.　　

backgroundColor:'rgba(234,234,234,1.0)',

   6.ref的使用,可以获取上下文的组件.

<TextInput ref="tel" style={styles.telInputStyle} placeholder = {'????:手机号'} keyboardType = {'number-pad'} />

var tel = this.refs.tel._lastNativeText          //ES5的写法
console.log(tel)

7.使用react-native-tab-navigator时，二级界面怎么隐藏tabBar.　

     开发中,遇见个大坑,react native在push之后怎么隐藏下方的tabbar.　

　　这个问题真是个大坑,按照原生的开发经验,一般项目的架构模式都是:先以tabBar作为根,tabBar之下再放置navigationBar.但是React Native却相反.是先以navigationBar作为根,navigationBar之下再放置tabBar.这样的话就可以二级界面就会自动隐藏tabBar了.该坑填完~~

demo地址:https://github.com/pheromone/react-native-push-tabbar

8.Android去除TextInput下方的横线.

在TextInput中使用underlineColorAndroid = {'transparent'}该属性即可.

 8.Ignoring return value of function declared with warn_unused_result attribute报错:React Native 0.32以下版本Xcode8报错解决办法

只需在报错代码前加上  (void):

(void)SecRandomCopyBytes(kSecRandomDefault, keyBytes.length, keyBytes.mutableBytes);
(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

　然后运行之后又会出现:

需要在报错的地方,替换代码:

   换为:

-(void)setRefreshControl:(RCTRefreshControl *)refreshControl
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  
}

　　OK.该坑填完.

 9.react native 之去除Warning:In next release empty section headers will be rendered. In this release you can use 'enableEmptySection' flag to render empty section headers.

只需要在警告类的ListView里添加一条属性即可:

enableEmptySections={true}

10.mac显示隐藏文件

 终端运行下面的命令即可:

defaults write com.apple.finder AppleShowAllFiles -boolean true ; killall Finder

11.出现无法在Xcode中Add Files to <...>其他XXXXXXX.xcodeproj的情况.会出现XXXXXXX.xcodeproj是灰色.

这种情况一般都是先使用了link命令导致的,一般只需先行npm install XXXXXX --save.然后再Add Files to <...>其他XXXXXXX.xcodeproj就可以选中了,之后在link即可.顺序搞对就行了.

实在不行,直接手动拖进去就可以了,简单粗暴,脱了裤子就是干.没事强奸程序猿不犯法的.

12.破解WebStorm:

在该位置处理:

粘贴下面的上去即可:

http://jetbrains.tencent.click

如果失效的话可以在此重新换个新的粘贴: 激活获取

 13.listView去除黄色警告:in next release empty section headers will be rendered.in the release you can use 'enableEmptySections' flag to render tmpty section headers.

如图:

只需在其listView中添加以下属性即可:

enableEmptySections={true}  //去除警告

14.React-Native中禁用Navigator手势返回

1     configureScene(route, routeStack) {
2         // return Navigator.SceneConfigs.PushFromRight;
3         var conf = Navigator.SceneConfigs.HorizontalSwipeJump;
4         conf.gestures = null;
5         return conf;
6     }

15.React-Native中拨打电话

import {Linking} from 'react-native';
function callPhone(){
  return Linking.openURL('tel:10086')
}

16.[] __nw_connection_get_connected_socket_block_invoke XX Connection has no connected handler.还TM一秒来一次

 Edit Scheme...  ->  Environment Variables -> Add -> Name: "OS_ACTIVITY_MODE", Value:"disable"

 17.获取视图组件的x,y,宽,高等值.使用RN自带的measure即可.

具体使用:

 1 /**
 2  * Created by shaotingzhou on 2017/2/28.
 3  */
 4 /**
 5  * Sample React Native App
 6  * https://github.com/facebook/react-native
 7  * @flow
 8  */
 9 
10 import React, { Component } from 'react';
11 import {
12     AppRegistry,
13     StyleSheet,
14     Text,
15     View,
16 } from 'react-native';
17 
18 
19 export default class One extends Component {
20     render() {
21         return (
22             <View style={styles.container}>
23                 <Text style={styles.welcome} >
24                     ONE
25                 </Text>
26                 <Text style={styles.instructions} ref="myText">
27                     ONE
28                 </Text>
29                 <Text style={styles.instructions}>
30                     ONE
31                 </Text>
32             </View>
33         );
34     }
35 
36     componentDidMount=() =>{
37         setTimeout(this.showMeasure);  //需要在页面加载完毕之后对视图进行测量,所有需要setTimeout
38     }
39     showMeasure = () =>{
40         this.refs.myText.measure((x,y,width,height,px,py) =>
41             alert(x)
42         );
43     }
44 
45 
46 }
47 
48 const styles = StyleSheet.create({
49     container: {
50         flex: 1,
51         justifyContent: 'center',
52         alignItems: 'center',
53         backgroundColor: '#F5FCFF',
54     },
55     welcome: {
56         fontSize: 20,
57         textAlign: 'center',
58         margin: 10,
59     },
60     instructions: {
61         textAlign: 'center',
62         color: '#333333',
63         marginBottom: 5,
64     },
65 });

 18.react native 定义一个全局变量:global

如:在A.js中定义个id为全局变量

global.id = '12345'

在B.js直接调用即可

alert(id)

 19.ECMAScript 6 学习文档

 http://es6.ruanyifeng.com/

 20.关于react-navigation的使用介绍及demo

使用介绍:  http://www.jianshu.com/p/2f575cc35780

demo: https://github.com/pheromone/navigationDemo 

 在使用react-navigation中遇到几个难点:

• 1.跳至相应路由(如返回首页功能).  http://www.jianshu.com/p/2f575cc35780
• 2.防止点击过快,跳界面两次.  https://github.com/react-community/react-navigation/pull/1348/files
• 3.static中使用this.  http://www.jianshu.com/p/2f575cc35780

   对于以上三个问题,现在可以不用修改源码也可以实现: https://github.com/pheromone/react-navigation-use

   防止多次点击可以采用该方案: https://blog.csdn.net/sinat_17775997/article/details/78853879

21.redux集合中文文档.mobx中文文档

redux-saga中文文档

Redux中文文档

Redux教程: 1 2 3

Redux Demo: 1 2

mobx中文文档

Mobx教程: 1 2

22.react-native init 指定版本

react-native init [项目名] --version="0.44.0"

23.黄屏.红屏警告处理 

http://reactnative.cn/docs/0.45/debugging.html

如关闭黄屏警告:   console.disableYellowBox = true;

24.android打包发生诸如 Could not list contents of 'XXX' Couldn't follow symbolic link.的错误.

如:

参考:https://github.com/facebook/react-native/issues/11212

 我上面这条报错就直接删除node_modules/react-native/third-party这个文件夹.

25.android下,Image控件不支持gif的解决方案.

在android/app/build.gradle中的dependencies字段中添加：

compile 'com.facebook.fresco:animated-gif:0.13.0'

然后重新运行即可.

如果你出现Unfortunately,XXX has stopped.

换为:

compile 'com.facebook.fresco:fresco:1.5.0'
compile 'com.facebook.fresco:animated-gif:1.5.0'

26.使用谷歌浏览器调式,Windows快捷键是F12 Mac是option+command+i

27.把css导出作为公共css使用.使用import {StyleSheet} from 'react-native'导入样式组件,使用module.exports导出即可,

如,导出样式:

/**
 * Created by shaotingzhou on 2017/10/25.
 */
import React from 'react';
import {
    StyleSheet
} from 'react-native';
const myStyle = StyleSheet.create({
    welcome: {
        height:100,
        width:100,
        backgroundColor:'red'
    },
});
module.exports = myStyle;

使用:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import  Style from './style'
export default class App extends Component<{}> {
  render() {
    return (
    <View style={Style.welcome}>
    </View>
    );
  }
}

28.动画学习 :  https://github.com/dwqs/blog/issues/41

29.iOS 跑项目出现 Failed to load bundle (http://......) with error:(Could not connect to development server).

如图:

多半是因为 iOS对https的要求,直接在xcode里面的info.plist添加 ATS设置即可.

 29.出现Connection to localhost port 8081 [tcp/sunproxyadmin] succeeede.........

如图:

是因为8081端口被占用了.只需吧占用8081的应用退出或者kill即可.

查看端口:  lsof -i:8081

杀掉端口的占用: kill 8081

30. 在集成react-navigation和redux时 出现TypeError: undefined is not a function (near '...addListener...')错误.

 请集成该库:  react-navigation-redux-helpers

请参考react-navigation和redux集成demo: https://github.com/pheromone/redux_react-navigation_use

31.吃屎级神坑,在集成react-navigation和redux时 出现 安卓不显示tabBar图标情况.

在tabBarOptions中添加showIcon: true如:

tabBarOptions: {
    showIcon: true,
    },
}

请参考https://github.com/pheromone/redux_react-navigation_use

32. 在集成react-navigation和redux时,出现tab1显示正常,其余不显示的情况.

把react-navigation的lazy置为false.

请参考https://github.com/pheromone/redux_react-navigation_use

33. iOS一切OK,但是就Android出现该问题:Connot add a child that doesnot have a YogaNode to a 

parent without a measure function!(Trying to add a 'ReactRaw TextShadowDode a a 'LayoutShadowNode'),

在Android上面,push的时候崩溃

这个问题差点搞死我和同事,我们百度+谷歌半天说是注释的问题,我们半信半疑的去了所有注释,果然没用.我怀疑redux的问题,

去除redux还是没有用,又怀疑是react-navigation的问题,去了还是一样........最后发现是在一个标签外面多写一个>,有次是在!前面多了一个!.

34.组件引用重复.

35.TypeError:undefined is not an object (evaluating 'section.data.length')

我这边出现这个错误是因为在json数据中的key错误,现阶段中,在使用SectionList时,在json中的key需要是data.

就是需要"data":[].这样的类型

 36.RN中长列表刷新机制遇到的史诗级bug:

RN中只要state一变,界面就改变.按理说把长列表中的数据源设置为state,只要state改变,界面也会改变.但是我遇到一个bug:我的数据源大小不会改变,只是其中的按钮点击type的数据会在true和false之间变化,但是不论我怎么改变按钮type的true和false.界面就是不变,甚至我减少数据也是不变,只有完全改变json界面才会再次渲染.

如下:

解决办法:

定义一个state,每次一点击需要修改界面,就重新赋值该state.

如:

 // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
           data:[{'type':false,'data':[1,2]},{'type':true,'data':[3,4]}]  //数据源
           num:0  //只作为修改界面使用
            };
    }    

 我通过在json串中加入点击type.保证点击效果的切换

//点击方法  
rightAction =() => {
    this.setState({
          data:[{'type':true,'data':[1,2]},{'type':true,'data':[3,4]}],
          num:this.state.num + 1 //点击一次加1,保证界面刷新 
 }) 
} 

这样,界面就会修改了.

 37.数组视图的写法.

a.bing+push写法.

 // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data:[{'key':'111111111'},{'key':'222222222'},{'key':'333333333'},{'key':'4444444'}]
        };
    }
    render() {
        return (
            <View>
                {this.renderAry(this.state.data)}
            </View>
        );
    }
    renderAry =(e) =>{
        var ary = []
        for(var i = 0;i < e.length; i++){
            ary.push(
                <Text onPress={this.alertAction.bind(this,i)}>{e[i].key}</Text>
            )
        }
        return  ary
    }
    alertAction = (i)=>{
        alert(i)
    }

View Code

b.map写法.

   // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            data:[{'key':'111111111'},{'key':'222222222'},{'key':'333333333'},{'key':'4444444'}]
        };
    }
    render() {
        return (
            <View>
                {
                    this.state.data.map((item,index)=>
                        <Text onPress={()=>this.alertAction(index)}>{item.key}</Text>
                    )
                }
            </View>
        );
    }
    alertAction = (i)=>{
        alert(i)
    }

View Code

上面两种方法 视图 和 对应点击 都OK

38.react-navigation的自带的导航条无法隐藏问题.

我使用react-navigation ^2.0.4不管怎么样都无法隐藏导航栏.然后换为^1.0.0-beta.21就可以隐藏了.fuck.fuck.fuck.

39.Android出现:cannot add child that doesn,t have a YogaNode to a parent without measure function!......

如图:

我出现这个问题的原因是:

 图中箭头处未写组件..........这是个什么鬼.

40.Failed  to load bundle(http://localhost:8081/index.bundle?......)

 如:

我的原因是上一个项目的启动了,然后我接着启动了下一个项目,就这样了...............

41.webView加载本地html出现中文乱码:加上 baseUrl: '' 即可.如

 <View style={{marginTop:15}}>
                    <Text>{item.item.title}</Text>
                    <WebView
                        source={{html:'<h1>233</h1>', baseUrl: ''}}
                        style={{width:width,height:140}}
                    />
                </View>

 42.查看三方库的版本信息:

npm info XXXXX

 43.引入指定版本库:

npm i XXX@0.3.1 --save

44.cannot add a child that doesnt have a YogaNodeto a parent without a measure function!(Trying to add a 'RCTRaw .........')

 产生这个问题的原因挺多的,我说下我今天遇到的这种.在iOS中正常在Android中报错.

完整报错:

原因是我在标签中写三元运算符的时候,忘记添加{}包住逻辑代码.如:

 45.在使用react-native-axios时,在发送post请求+附带头信息时,报401错误.参数无误,headers无误.

是参数和headers顺序反了.应该先来参数再设置headers.

401错误:

正确:

 46.react native font family 'Material Icons'.

这个错误是 react-native-vector-icons 的报错.可是我也没有使用这个库啊!!!实在没办法只能

react-native link react-native-vector-icons 
一下.也许可能大概maybe 是其他三方库使用到了吧.反正我这样就好了
如果还是会报这个错.可以试试

1.Close the running packager

2.Run react-native link react-native-vector-icons

3.Then run react-native start --reset-cache

4.Finally run react-native run-ios to restart the simulator

47.iOS 真机运行Test报错:Linker command failed with code 1(use -v to see invacation)
如

搞半天也没弄好,怀疑我之前开发iOS原生是不是运气太好了.一次木碰到.惹急了,直接把edit scheme里面的test全部取消.

OK,反正我test不用,你给我一边歇着去.

48.<Text>文本换行.
如:

                        <Text>电话:110{'\r\n'}地址:无</Text>

 49.在使用集成react-native-image-crop-pickeriOS正常可运行.但是Android却报错.配置也按照官方设置了.

报错信息:undefined is not an object (eva........)

请参看这个 1  2.本人是靠2修复的

 50.Connection to localhost port 8081 [tcp/sunproxyadmain] succeded!

     Port 8081 already in use.package is eiteher not not runnig correctly..........

很直白的报错信息.断后被占用.

终端打开

.lsof -i  :8081

一看是大快播.惭愧.....

杀掉进程.

sudo kill -9 PID号码

ok.整个世界清静了.

51.拉取代码,显示HTTP Basic: Access denied ......

这个问题,烦死我了.配置SSH,没用,换网络没用,然后发现gitlab密码是初始的.然后我修改下密码.再是不行.

终端: git config --global http.sslVerify false  (保证再次输入需要密码)

ok,再拉取,需要重新输入密码.OK,搞定 

52.npm install失败.

如图,无法,我一开始以为是库依赖的版本写错了.发现不是.然后https://www.npmjs.com/package/@babel/core 在里面安装了下

yarn add @babel/core --dev 还是不行,最后yarn install 会让你选择版本,选择框中那个版本即可......哎 

 53.去新公司,发现公司的库太新了,而我的node,npm是去年安装的.需要更新,不更新部分库完全安装不上......

无奈只能回去更新,卸载node npm:  https://www.jianshu.com/p/920961b6a538

然后在更新:  brew install watchman 发现updating homebrew...卡住不动.


我一开始替换淘宝源发现不行.反而导致完全无法使用npm了,连react-native init xxxx都失效.

报错:info there appears to be trouble with your network connetrion.Retrying....

妈呀.我只能替换回来.

npm config list   查看源

npm config delete registry  删除源

OK,回到起点.更新一直卡住: https://my.oschina.net/jouypub/blog/1921158

现在可以了.

54.pod install一直卡住.一会失败:RPC failed; curl 18 transfer closed with outstanding read data remaining

先翻个墙.

直接终端: git config --global http.https://github.com.proxy socks5://127.0.0.1:1086

然后在pod install,好了. 

55.如果在RN工程中使用了Eslint,但是又突然不想被限制.直接在XXX.js上加:

/* eslint-disable */

也可以对部分进行限制 

/* eslint-disable no-new */

56.之前集成云信的时候,添加了地图库.但是不知为何最近一用Xcode启动就报 #import <MAMapKit/MAMapKit.h> file not found

,使用命令行启动就好的.

使用  react-native unlink react-native-amap3d

56.Android报错:Error:found unexpected optical bounds (red pixel) on top border at x=106.

在gradle.properties文件下添加

android.enableAapt2 = false

 57.出现 Java.util.NoSuchElementException........

取消你的Instant run功能:  https://blog.csdn.net/u013762572/article/details/80571770

 58.React Native 发送短信且自带文字

if(Platform.OS==="ios"){
 Linking.openURL("sms:12345678901&body=短信内容");
}else{
 Linking.openURL("sms:12345678901?body=短信内容);
}

59.android: Native module HttpCacheModule tried to overrride HttpCacheModule for module name RCTHttpCache.if this was your intention.....　

我的问题是我多link了一次,导致引入多了一次,删除多余的即可.

60.Android真机报错: **Configuration ‘compile’ is obsolete and has been replaced with ‘implementation’. 
It will be removed at the end of 2018** 

这个无聊的问题搞了我半小时.又是升级又是修改Android代码的.最后发现是真机连接时,忘记点弹框的允许调试了....

61.无论怎么修改数据源(除了清空数据源),FlatList始终不会再次render.

就像这样子

无论怎么修改数据源(除了清空数据源),无法再次render.但是改为下面这样,单纯加个style就好了...

这样子,只要修改数据源,就会再次render.....至今搞不懂原理..........

 62.Android真机 Execution failed for task ':app:installDebug'. 

我的解决办法是 把原来安装的那个app删除,然后再安装就好了.

63.android打包错误:

 uncompiled PNG file passed as argument. Must be compiled first into .flat file..

添加

org.gradle.configureondemand=true

到android/gradle.properties中

64.关掉webStorm中双击shift打开搜索框.

1.按command+shift+a打开,然后输入registry,点击进入

 2.找到ide.suppress.double.click.handler一栏,后面打上勾.然后点击close关闭即可

 65.时隔半年,再次入坑RN.集成redux时报引入Provider出现.如图:

npm installl也有时会失败,我出现这个原因是前几天我重新安装了node.js.但是是最新版本,不是稳定版. 我重新卸载npm和node之后重新安装稳定版就好了.

66.error Received malformed response from registry for undefined. The registry may be down.

一开始我以为是npm或者rn升级出啥幺蛾子了...最后查了十分钟,发现是那堵无比令人恶心的墙...fuck!!!!!!XXX,你们做的那点破事,别藏着掖着了.恶心不?

解决办法,换个淘宝源或者翻个墙就行.

 67.Can not find variable :Component

需要引入 

import React, {Component} from 'react';

 68.出现 

错误: 找不到或无法加载主类 org.gradle.wrapper.GradleWrapperMain

 如图:

我的办法是删除android/gradle/wrapper/  下的gradle-wrapper.jar然后再次运行即可

后续工作遇到再写.

以上是 React Native工作小技巧及填坑记录 的全部内容， 来源链接： utcz.com/z/382229.html