Android에서 react-native를 사용하여 "새해 복 많이 받으세요"SMS를 보내는 방법

Android에서 react-native를 사용하여 간단한 "새해 복 많이 받으세요"SMS를 보내는 방법.

여기에 있는 전체 앱 빌드의 코드는 https://github.com/Merlier/rn_example_send_sms에서 사용할 수 있습니다.

시작하다



요구 사항:
  • 반응 네이티브 >= 0.60

  • 먼저 새 react-native 프로젝트를 시작하십시오.

    $ npx react-native init rn_example_send_sms
    


    react-native-sms 모듈을 설치합니다.

    $ npm install --save react-native-sms
    


    그런 다음 android/app/src/main/AndroidManifest.xml에 권한을 추가합니다.

      <uses-permission android:name="android.permission.READ_SMS" />
      <uses-permission android:name="android.permission.WRITE_SMS" />
      <uses-permission android:name="android.permission.SEND_SMS" />
    


    사용자에게 요청하여 SMS 권한에 액세스하려면 react-native-permissions가 필요합니다.
    따라서 react-native-permissions 모듈을 설치합니다.

    $ npm i --save react-native-permissions
    


    문자를 보내다



    SMS를 보내기 위해 "getSMSPermission"함수를 호출하여 SMS 권한을 확인하고 요청하는 "sendSMS"함수를 코딩합니다. 그런 다음 "sendSMS"기능은 react-native-get-sms-android 모듈을 사용하여 "autoSend"기능을 통해 SMS를 보냅니다.

    다음과 같이 app.js를 수정하기만 하면 됩니다.

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow strict-local
     */
    
    import React, {useState} from 'react';
    import {
      StyleSheet,
      SafeAreaView,
      View,
      Button,
      Text,
      TextInput,
    } from 'react-native';
    import {check, request, RESULTS, PERMISSIONS} from 'react-native-permissions';
    import SmsAndroid from 'react-native-get-sms-android';
    
    const App: () => React$Node = () => {
      const [phoneNumber, setPhoneNumber] = useState('');
      const [message, setMessage] = useState('Happy new year!');
    
      const getSMSPermission = async () => {
        try {
          const checkResult = await check(PERMISSIONS.ANDROID.SEND_SMS);
          switch (checkResult) {
            case RESULTS.DENIED:
              const requestResult = await request(PERMISSIONS.ANDROID.SEND_SMS);
              return Promise.resolve(requestResult);
            case RESULTS.GRANTED:
              return Promise.resolve(checkResult);
            default:
              return Promise.reject();
          }
        } catch (err) {
          // console.log(err);
        }
      };
    
      const sendSMS = async () => {
        try {
          await getSMSPermission();
          SmsAndroid.autoSend(
            phoneNumber,
            message,
            (fail) => {
              console.log('Failed with this error: ' + fail);
            },
            (success) => {
              console.log('SMS sent successfully');
            },
          );
        } catch (err) {
          // console.log(err)
        }
      };
    
      return (
        <SafeAreaView style={styles.container}>
          <View style={styles.form}>
            <Text style={styles.title}>Send SMS using react-native on Android</Text>
            <TextInput
              style={styles.textInput}
              placeholder={'Phone number'}
              onChangeText={setPhoneNumber}
              value={phoneNumber}
            />
            <TextInput
              style={styles.textInput}
              placeholder={'Message'}
              onChangeText={setMessage}
              value={message}
            />
            <Button onPress={sendSMS} title="Send SMS" />
          </View>
        </SafeAreaView>
      );
    };
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#eee',
      },
      form: {
        padding: 20,
      },
      title: {
        fontSize: 20,
        marginBottom: 20,
      },
      textInput: {
        backgroundColor: '#fff',
        marginBottom: 5,
      },
    });
    
    export default App;
    
    


    앱을 실행합니다.

    $ npx react-native run-android
    




    재미있게 보내세요
    새해 복 많이 받으세요!
    :)

    좋은 웹페이지 즐겨찾기