React Native常用屬性
阿新 • • 發佈:2019-01-11
1.flex屬性
//flexDirection表示排布的方向,類似android線性佈局的排布方向:橫線和豎向,預設是豎向'column',橫向'row' //justifyContent:表示佈局內實際內容的顯示區域(以橫向的row舉例):整體居左、居右、居中、還是兩端貼邊中間控制元件間距相等('space-between'),還是單個控制元件的左右間距都相等('space-around') //alignItems:表示所有控制元件在顯示區域的對其方式:比如4個控制元件都設定是在X軸上排列,但是高度不相等,這個屬性就是來描述這幾個控制元件在Y軸上如何對其: //center:數值居中;flex-start:頂部對其;flex-end:底部對其;stretch:上下都對其,類似start和end的結合體
position: 'absolute',
2.獲取螢幕寬高
const Dimensions = require('Dimensions'); //必須要寫這一行,否則報錯,無法找到這個變數
const ScreenWidth = Dimensions.get('window').width;
const ScreenHeight = Dimensions.get('window').height;
3.設定圖片
// var important = require('../image_jingdong/a2.png'); // return ( // <View style={{backgroundColor: "white", flex: 1, alignItems: 'center'}}> // <Image source={important} style={{position: 'absolute', bottom: ScreenHeight*0.05}}></Image> // </View> // ); // }
4.資料儲存
//資料持久化 //https://github.com/sunnylqm/react-native-storage/blob/master/README-CHN.md import Storage from 'react-native-storage'; import { AsyncStorage } from 'react-native'; var storage = new Storage({ size: 1000, defaultExpires: null, enableCache: true, // 儲存引擎:對於RN使用AsyncStorage,對於web使用window.localStorage // 如果不指定則資料只會儲存在記憶體中,重啟後即丟失 storageBackend: AsyncStorage }) // storage.save({ // key:'userMessage', // data:{ // engiTeam:'', // groupLoginName:'', // groupName:'', // groupLoginPwd:'' // } // }) global.storage = storage; // storage.save({ // key: 'user', // 注意:請不要在key中使用_下劃線符號! // id: '1001', // 注意:請不要在id中使用_下劃線符號! // data: userA, // expires: 1000 * 60 // }); // // //load 讀取 // storage.load({ // key: 'user', // id: '1001' // }).then(ret => { // // 如果找到資料,則在then方法中返回 // console.log(ret.userid); // }).catch(err => { // // 如果沒有找到資料且沒有sync方法, // // 或者有其他異常,則在catch中返回 // console.warn(err.message); // switch (err.name) { // case 'NotFoundError': // // TODO; // break; // case 'ExpiredError': // // TODO // break; // } // }) //// 刪除單個數據 // storage.remove({ // key: 'lastPage' // });
5.網路狀態判斷
是否有網:
//判斷網路狀態
NetInfo.isConnected.fetch().done((isConnected) => {
if (isConnected) {
this.getPermission();
} else {
}
console.log('First, is ' + (isConnected ? 'online' : 'offline'));
});
6.MD5加密
//md5加密https://github.com/digitalbazaar/forge#md5
var forge = require('node-forge');
var md = forge.md.md5.create();
md.update(this.state.inputPassword);
var password = md.digest().toHex();
7.判斷是android還是iOS
Platform
} from 'react-native'
if(Platform.OS==='android'){
this.setState((prevState) => ({marginTop: 0}));
}else {
this.setState((prevState) => ({marginTop: 20}));
}
8.將RN中的頁面作為android的Activity來使用
Activity繼承ReactNativeActivity,重寫getMainComponentName,在裡面返回RN的頁面註冊的名字,即可。
public class MessageListActivity extends ReactActivity{
@Override
protected String getMainComponentName() {
return "MessageListActivity";
}
}
export default class MessageListActivity extends React.Component {
componentDidMount() {
if (Platform.OS === 'android') {
this.setState((prevState) => ({marginTop: 0}));
} else {
this.setState((prevState) => ({marginTop: 20}));
}
}
constructor(props) {
super(props);
this.state = {marginTop: 0}
}
render() {
return (
<View style={{alignItems:'center',flex: 1, marginTop: this.state.marginTop, backgroundColor: 'white'}}>
<Text style={{marginTop:15,marginLeft:0.025*ScreenWidth, color: 'black', fontWeight: 'bold', fontSize: 16}}>訊息列表</Text>
</View>
);
};
}
//將這裡的頁面對映到android工程
AppRegistry.registerComponent('MessageListActivity', () => MessageListActivity);
8.判斷string是否為空
(typeof obj == "undefined" || obj == null || obj == "")?{uri:baseImageUrl}:{uri: item.userImage}
9.判斷string是否包含string
if(this.state.allUpImages[this.state.nowUpImageIndex].uri.indexOf('upload')!=-1){
//表示存在
}
10.陣列為空
if (array === undefined || array.length == 0) { // array empty or does not exist }