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

 

以下是本人在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