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

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

React Native常见组件用法经典教程：http://www.jianshu.com/u/8b645668c3c4

转载自:http://www.cnblogs.com/shaoting/p/5934725.html

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

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

使用:

1
2
3
leftViewStyle:{
       width:width/4,
   },

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

使用Platform

先引入Platform:

1
2
3
4
5
6
7
8
9
10
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image,
    TouchableOpacity,
    Platform
} from 'react-native';

　　使用:

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

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

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

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

1
<TextInput ref="tel" style={styles.telInputStyle} placeholder = {'📱:手机号'} keyboardType = {'number-pad'} />
1
2
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'}该属性即可.

Android error

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

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

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

然后运行之后又会出现:

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

   换为:

1
2
3
4
5
-(void)setRefreshControl:(RCTRefreshControl *)refreshControl
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl;  
}

　OK.该坑填完.

10.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里添加一条属性即可:

1
enableEmptySections={true}

11.mac显示隐藏文件

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

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

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

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

13.破解WebStorm:

在该位置处理:

粘贴下面的上去即可:

http://jetbrains.tencent.click

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

14.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}  //去除警告

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

16.React-Native中拨打电话

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

17.[] __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”

 

18.获取视图组件的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 });

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

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

global.id = '12345'

在B.js直接调用即可

alert(id)

发表评论

电子邮件地址不会被公开。 必填项已用*标注