react native学习笔记22——常用API（4）ToastAndroid、BackHandler及特定平台代码常用写法

前言

前面三节中介绍的React Native官方提供的api都是双平台通用的api，在React Native中也有一些只在特定平台才能使用的api，官方的命名也很友善，只适用于Android的api通常叫XXXAndroid,同理只使用于iOS的通常叫XXXIOS，例如今天将介绍的ToastAndroid。但也有例外，例如BackHandler，只适用于Android平台，用于返回键处理的api，在rn0.45版本之前是BackAndroid，0.45以后废弃了BackAndroid。新的API——BackHandler和旧API——BackAndroid用法是一致的，只是新的API增加了对tvOS的支持。

ToastAndroid

用于在Android设备上显示一个悬浮的提示信息,通常用于弱信息提醒，该提醒不会影响用户交互。

方法

static show(message:string,duration:number) 设置toast消息的弹出

static showWithGravity(message:string, duration:number, gravity:number) 设置toast消息的弹出,可以设置toast的位置。

属性

• SHORT 静态int值，表示toast显示较短的时间
• LONG 静态int值，表示otast显示较长的时间
• TOP 静态int值，toast顶部显示
• BOTTOM 静态int值，toast底部显示
• CENTER 静态int值，toast中间显示

使用实例

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ToastAndroid,
    TouchableHighlight
} from 'react-native';

export default class ToastAndroidDemo extends Component {
    render() {
        return (
            <View>

                <TouchableHighlight
                    style={styles.button}
                    underlayColor="#a5a5a5"
                    onPress={()=>ToastAndroid.show('长时间的toast',ToastAndroid.LONG)}>
                    <Text style={styles.buttonText}>长时间toast</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    style={styles.button}
                    underlayColor="#a5a5a5"
                    onPress={()=>ToastAndroid.show('短时间的toast',ToastAndroid.SHORT)}>
                    <Text style={styles.buttonText}>短时间toast</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    style={styles.button}
                    underlayColor="#a5a5a5"
                    onPress={()=>ToastAndroid.showWithGravity('top toast',ToastAndroid.SHORT,ToastAndroid.TOP)}>
                    <Text style={styles.buttonText}>top toast</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    style={styles.button}
                    underlayColor="#a5a5a5"
                    onPress={()=>ToastAndroid.showWithGravity('center toast',ToastAndroid.SHORT,ToastAndroid.CENTER)}>
                    <Text style={styles.buttonText}>center toast</Text>
                </TouchableHighlight>
                <TouchableHighlight
                    style={styles.button}
                    underlayColor="#a5a5a5"
                    onPress={()=>ToastAndroid.showWithGravity('bottom toast',ToastAndroid.SHORT,ToastAndroid.BOTTOM)}>
                    <Text style={styles.buttonText}>bottom toast</Text>
                </TouchableHighlight>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    button: {
        margin:5,
        backgroundColor: 'white',
        padding: 15,
        borderWidth: StyleSheet.hairlineWidth,
        borderColor: '#cdcdcd',
    }
});

BackHandler

监听设备上的返回按钮事件。

• Android：监听后退按钮事件。如果没有添加任何监听函数，或者所有的监听函数都返回false，则会执行默认行为，退出应用。
• tvOS(即Apple TV机顶盒)：监听遥控器上的后退按钮事件（阻止应用退出的功能尚未实现）。

监听函数是按倒序的顺序执行（即后添加的函数先执行）。如果某一个函数返回true，则后续的函数都不会被调用。

方法

static exitApp() 退出应用

static addEventListener(eventName:BackPressEventName,handler:Function) 添加back返回键监听事件

static removeEventListener(eventName:BackPressEventName,handler:Function) 删除back返回键监听事件

使用实例

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ToastAndroid,
    Platform,
    BackHandler,
} from 'react-native';
let count=2;
export default class BackHandlerDemo extends Component {
    componentDidMount(){
        if (Platform.OS === 'android') {
            BackHandler.addEventListener('hardwareBackPress', function () {
                if (count >= 1) {
                    ToastAndroid.show('收到点击返回键信息...' + count, ToastAndroid.SHORT);
                    count--;
                    return true;
                } else {
                    return false;
                }
            });
        }
    }
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>
                    请点击返回键查看效果...
                </Text>
            </View>
        );
    }
    componentWillUnmount() {
        if (Platform.OS === 'android') {
            BackHandler.removeEventListener('hardwareBackPress',()=>{});
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});

在上述示例中我们使用了形如if (Platform.OS === 'android') {...}的判断语句，该判断语句的作用是区分平台，让返回监听事件只在Android平台上执行，在ios中则不执行里面的逻辑。这是Android,iOS双平台开发时特殊代码的相关写法之一。下面总结了在构建开发跨平台app时，针对不同的平台需求编写不同的代码的方法。

特定平台代码常用写法

检测平台

React Native提供了检测客户端当前运行的平台的模块，该模块在小范围的平台定制代码中很有用，如上面BackHandler的实例。

import {   Platform  } from 'react-native';
if (Platform.OS === 'android') { 
...
}
if (Platform.OS === 'ios') { 
...
}

一个实用的方法是Platform.select()，通过前面的Platform.OS的值针对不同平台使用不同的组件或不同的布局样式，见下面的示例：

import { Platform, StyleSheet } from 'react-native';

var styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  },
});

上面的代码会根据平台的不同返回不同的container样式——iOS上背景色为红色，而android为蓝色。

这一方法可以接受任何合法类型的参数，因此你也可以直接用它针对不同平台返回不同的组件，像下面这样：

var Component = Platform.select({
  ios: () => require('ComponentIOS'),
  android: () => require('ComponentAndroid'),
})();
<Component />;

检测平台版本

在Android上，Version属性是一个数字，表示Android的api level：

import { Platform } from 'react-native';

if(Platform.Version === 21){
  console.log('Running on Lollipop!');
}

在iOS上，Version属性是-[UIDevice systemVersion]的返回值，具体形式为一个表示当前系统版本的字符串。比如可能是”10.3”。

文件管理

即把针对不同平台的组件放置到不同的文件夹下管理。如：

/common/components/   
/android/components/   
/ios/components/

该方法是最直接的方法。
另一种类似的处理方法是根据平台不同在文件命名上进行区分。如：

MyButtonIOS.js
MyButtonAndroid.js

特定平台扩展名

React Native会检测某个文件是否具有.ios.或是.android.的扩展名，然后根据当前的平台加载对应的文件。

假设你的项目中有如下两个文件：

MyButton.ios.js
MyButton.android.js

以这样的方式命名组件后，你可以在其他组件中直接引用，而无需关心当前运行的平台环境。具体使用方式如下:

import MyButton from './components/MyButton';

React Native会根据当前运行的平台去加载正确的组件文件