以下是本人在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;
}
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 ONE25 </Text>26 <Text style={styles.instructions} ref="myText">27 ONE28 </Text>29 <Text style={styles.instructions}>30 ONE31 </Text>32 </View>33 );34 }35 36 componentDidMount=() =>{37 setTimeout(this.showMeasure); //需要在页面加载完毕之后对视图进行测量,所有需要setTimeout38 }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 });
