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