React Native－17.React Native 常用API及实践 AppStateIOS StatusBarIOS

来源：互联网发布：mac怎么玩英雄联盟编辑：程序博客网时间：2024/05/21 15:47

实例：

AppStateIOS简介

AppStateIOS类似于iOS中的AppDelegate.h的作用，
我们可以通过他来获取APP运行过程中的各种状态，比如，激活状态，状态改变，还经常用来做推送通知。

它拥有添加和删除事件的静态方法，因此，我们可以在代码中添加事件监听，属性和事件如下：

currentState : 我们可以通过AppStateIOS.currentState获取当前App的属性。
addEventListener （type，handler）：静态方法，用于添加事件监听。
removeEventListenter（type，handler）：静态方法，用户删除事件监听。

StatusBarIOS简介

状态栏操作API

3个静态方法：

setStyle(style,animated) : 设置状态栏的样式。其参数style是字符串，可以是default 和 light－content 中的一个。animated是可选参数，表示是否有动画过度，其值为true或者false。
setHideen（hide 嗯，animated）：用于隐藏状态栏。其参数hidden是boolean类型，如果其值为true，则隐藏状态栏，否则不隐藏。animated为可选参数，表示是否有动画过渡，其值为true或者false。
setNetworkActivityIndicatorVisible（visible）：是否显示网络状态。其参数visible是boolean类型，如果其值为true，则显示网络状态，否则不显示。

我们来搞出些事情

封装一个组件，用来测试AppStateIOS 和 StausBarIOS中的API。

statel.js

var React = require('react-native')var {    AppRegistry,    StyleSheet,    AlertIOS,    View,    Text,    AppStateIOS,    TouchableOpacity,    StatusBarIOS,} = React;var styles = StyleSheet.create({    flex: {        flex: 1,    },    position: {        marginTop: 74,        alignSelf: 'center'    },    font: {        fontSize : 20,        color: '#222222',    }})StatusBarIOS.setStyle('default');var State = React.createClass({    getInitialState: function(){        return{            currentAppState:null,            states:[]        };    },    componentDidMount:function(){        AppStateIOS.addEventListener('change',this._handleAppStateChange);        AppStateIOS.addEventListener('memoryWarning',this._handleAppStateChange);    },    componentWillUnmount: function(){        AppStateIOS.removeEventListener('change',this._handleAppStateChange);        AppStateIOS.removeEventListener('memoryWarning',this._handleAppStateChange);    },    _handleAppStateChange:function(currentAppState){        var states = this.state.states;        states.push(currentAppState);        this.setState({            currentAppState,            states        });    },    render:function(){        return(            <View style = {styles.flex}>                <TouchableOpacity onPress = {this.showLater}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> AppStateIOS 测试  + {this.state.currentAppState}                    </Text>                </TouchableOpacity>                <TouchableOpacity onPress = {this.showLoading}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> 开始loading                    </Text>                </TouchableOpacity>                <TouchableOpacity onPress = {this.endLoading}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> 停止loading                    </Text>                </TouchableOpacity>                <TouchableOpacity onPress = {this.defaultStatusBar}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> default样式                    </Text>                </TouchableOpacity>                <TouchableOpacity onPress = {this.lightStatusBar}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> light－content样式                    </Text>                </TouchableOpacity>                <TouchableOpacity onPress = {this.hidenStatusBar}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> 隐藏状态栏                    </Text>                </TouchableOpacity>                <TouchableOpacity onPress = {this.showStatusBar}                                  style = {styles.flex}>                    <Text style = {[styles.flex,styles.position,styles.font]}> 显示状态栏                    </Text>                </TouchableOpacity>            </View>        )    },    showLater: function(){        var later = '历史数据'        for(var i in this.state.states){                alert('later：'+this.state.states[i]);        }    },    showLoading: function(){        StatusBarIOS.setNetworkActivityIndicatorVisible(true);    },    endLoading: function(){        StatusBarIOS.setNetworkActivityIndicatorVisible(false);    },    lightStatusBar: function() {        StatusBarIOS.setStyle('light-content');    },    defaultStatusBar: function() {        StatusBarIOS.setStyle('default');    },    hidenStatusBar: function() {        StatusBarIOS.setHidden(true);    },    showStatusBar: function() {        StatusBarIOS.setHidden(false);    }});module.exports = State

在ios.index.js中我们这样做：

'use strict';var React = require('react-native');var State = require('./iOSFile/statel.js');var {  AppRegistry,  StyleSheet,  Text,  View,  Image,  ScrollView,  WebView,  NavigatorIOS,  AsyncStorage,  TouchableOpacity,} = React;var styles = StyleSheet.create({    container : {        flex: 1    },    row : {        flexDirection: 'row',        marginBottom: 10,    },    item : {        flex: 1,        marginLeft:5,        borderWidth: 1,        borderColor: '#ddd',        marginRight: 5,        height: 100,    },    img: {        flex: 1,        backgroundColor: 'transparent',    },    item_text: {        backgroundColor: '#000',        opacity:0.7,        color:'#fff',        height:25,        lineHeight:18,        textAlign:'center',        marginTop:74    },    btn: {        backgroundColor: '#ff7200',        height: 33,        textAlign : 'center',        color: '#fff',        marginLeft:10,        marginRight: 10,        lineHeight: 24,        marginTop: 40,        fontSize: 18,    },    list_item : {        marginLeft: 5,        marginRight: 5,        padding:5 ,        borderWidth: 1,        height: 30,        borderRadius: 3,        borderColor: '#ddd',    },    list_item_desc : {        flex: 2,        fontSize: 15,    },    list_item_price: {        flex: 1,        textAlign: 'right',        fontSize: 15,    },    clear: {        marginTop : 10,        backgroundColor: '#fff',        color: '#000',        borderColor: '#ddd',        borderWidth:1,        marginLeft: 10,        marginRight:10,        lineHeight: 24,        height:33,        fontSize: 18,        textAlign: 'center',    }});var wxsPrj = React.createClass({  render: function() {    return (        <NavigatorIOS style = {styles.container}                      initialRoute = {                        {                            component:State,                            title:'样式列表',                            barTintColor: '#ddd'                        }                      }/>    );    }});AppRegistry.registerComponent('wxsPrj', () => wxsPrj);

代码中的styles 中有很多没有用上，由于代码繁多，这里我就一一拿出来了，复制过去即可。

0 0