1. 程式人生 > >React Native常用屬性

React Native常用屬性

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
}