react native实现拨打保存到通讯录的功能

时修贤
2023-12-01

引入的模块

import RBSheet from "react-native-raw-bottom-sheet";
import {
    SafeAreaView, NativeModules, View, StyleSheet, Platform, Modal, Image, TouchableOpacity, BackHandler, ScrollView, StatusBar,
    AppState, Text, Alert, Linking, TouchableWithoutFeedback, DeviceEventEmitter, ProgressBarAndroid, Button, Clipboard, ActivityIndicator
} from 'react-native';
import MyAppModule from "../MyAppModule";

内容区域代码

<RBSheet
                    ref={ref => {
                        this.RBSheet = ref;
                    }}
                    height={47 * (this.selectedPhoneNumbers().length*2 + (this.state.chVisible?3:2))}
                    openDuration={250}
                    customStyles={{
                        container: {
                            justifyContent: "center",
                            alignItems: "center"
                        }
                    }}
                >
                    <SafeAreaView style={{ width: '90%', flex: 1 }}>
                        
                        {/* {this.state.fzVisible &&  */}
                            <View style={{ marginTop: 5, marginBottom: 5 }}><Button title='复制' onPress={this.copyTextMessageToClipboard} /></View>
                        {/* } */}
                        
                        <View style={{ marginTop: 5, marginBottom: 5 }}><Button color="#cd2b33" type="danger" title='删除' onPress={this.removeTextMessage} /></View>
                        
                        {this.state.chVisible &&
                            <View style={{ marginTop: 5, marginBottom: 5 }}><Button color="#cd2b33" type="danger" title='撤回' onPress={this.recallTextMessage} /></View>
                        }
                        {
                            this.selectedPhoneNumbers().map(
                                n => <View style={{ marginTop: 5, marginBottom: 5 }}><Button title={'拨打:' + n} onPress={e => this.makePhoneCall(n)} /></View>
                            )
                        }
                        {
                            this.selectedPhoneNumbers().map(
                                n => <View style={{ marginTop: 5, marginBottom: 5 }}><Button title='保存到通讯录' color="#cd2b33" type="danger" onPress={e => this.savePhoneCall(n)} /></View>
                            )
                        }
                    </SafeAreaView>
                </RBSheet>

函数代码

//复制
copyTextMessageToClipboard = () => {
        Clipboard.setString(this.state.selectedTextMessage.text);
        this.RBSheet.close();
    }
//拨打号码
makePhoneCall = (number) => {
        Linking.openURL('tel:' + number);
        this.RBSheet.close();
    }
//保存到通讯录
    savePhoneCall = (number) => {
        if (number && number.length > 0) {
            let name = "";
            MyAppModule.addContactMulti1(name, number);
        }
    };

MyAppModule.js

// MyAppModule.js
import { NativeModules } from "react-native";
// 下一句中的MyAppModule即对应上文
// public String getName()中返回的字符串
export default NativeModules.MyAppModule;

 

 

 类似资料: