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
}

React Native常用属性

猜你喜欢