Получить токен первого исполнения от RNPushNotification

Question

Я новичок в React Native. Я разрабатываю приложение, которое подключается к службам AWS и может отправлять уведомления pu sh на телефон, на котором установлено приложение. Я использую следующие службы: AWS Amplify, PushNotification, AWS Pinpoint, AWS Kinesis.

Сначала я начинаю с этого, когда я вхожу в свое приложение, мне будет показан экран входа в систему.

Этот логин не имеет валидации, единственное, что сейчас имеет ценность, - это первый ввод и кнопка входа в систему. Когда я напишу идентификатор клиента, он отправит меня на другой экран, где будет показано уведомление pu sh. Чтобы отправить это pushNotification, мне нужно идентифицировать токен устройства, на котором я работаю.

Для этого я использую функцию:

let tokenDispositivo;
NativeModules.RNPushNotification.getToken(token => 
   {  console.log(token);
      tokenDispositivo = token;
  }

Но когда я запускаю приложение в первый раз , переменная Token имеет значение undefined.

Это происходит при первом запуске приложения, когда я перезагружаю приложение в том же экземпляре, который он находит жетон. У меня есть подозрение, что, возможно, я неправильно использую компоненты React и отправляю его неправильно.

Это мой код:

Приложение. js:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */
import 'react-native-gesture-handler';
import React from 'react';
import { NativeModules, Linking, Alert } from 'react-native';

//AWS
import Amplify, { Analytics } from 'aws-amplify';
import awsmobile from './aws-exports';
import PushNotification from '@aws-amplify/pushnotification';

//Navigation
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// Screens 
import LoginScreen from './screens/loginScreen';
import LoginSuccessfulScreen from './screens/loginSuccessful';

//Configuraciones
Amplify.configure(awsmobile);
Analytics.configure(awsmobile);
PushNotification.configure(awsmobile);

Amplify.Logger.LOG_LEVEL = 'VERBOSE';

// Obtener datos de la notificación recibida
PushNotification.onNotification((notification) => {

  if (notification.foreground) {
    console.log('onNotification foreground', notification);
    const data = JSON.parse(notification.data['pinpoint.jsonBody']);
    console.log('onNotification data', data);
    Alert.alert(
      "Mensaje de oferta",
      "Usted ha recibido una nueva oferta, si desea visualizarla, presione Ok",
      [
        {
          text: "Cancel",
          onPress: () => console.log("Cancel Pressed"),
          style: "cancel"
        },
        { text: "OK", onPress: () => OpenURLButton(data.Url) }
      ],
      { cancelable: false }
    );

  } else {
    console.log('onNotification background or closed',
               notification);
    }
});
  const OpenURLButton = async ( url ) => {
    await Linking.openURL(url);
  }
// Obtener token de registro
PushNotification.onRegister(async(token) => {
  console.log('in app registration', token);
});

// Obtener datos de la notificación al momento de abrirla (background)
PushNotification.onNotificationOpened((notification) => {
    console.log('the notification is opened', notification);
    OpenURLButton("reservedNameOfUrl.html");
});

let tokenDispositivo;
NativeModules.RNPushNotification.getToken(token => 
   {  console.log(token);
      tokenDispositivo = token;
  }
);


//Navigation 
const Stack = createStackNavigator();
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name= "Login"> 
        {props => <LoginScreen {...props} extraData={tokenDispositivo}/>}
        </Stack.Screen>
        <Stack.Screen name="Login exitoso" component = {LoginSuccessfulScreen}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

LoginScreen. js:

import React, { useState } from 'react';
import { Text, View, StyleSheet, TextInput, Button, Alert, PermissionsAndroid } from 'react-native';
import Geolocation from '@react-native-community/geolocation';
import AWS from 'aws-sdk';
import config from '../config';
import moment from 'moment';


function sendRecord(event) {
  // Update AWS Config
  if (config.aws) {
    AWS.config.update(config.aws);
  }
  if (event != null) {
    console.log('event = ' + JSON.stringify(event));
  }
  else {
    console.log('No event object');
  }

  var record = JSON.stringify(event);

  var recordParams = {
    Data: record,
    PartitionKey: 'partitionkey',
    StreamName: 'AnyStreamNameForEvent'
  };

  var kinesis = new AWS.Kinesis({ region: config.kinesis.region });
  try {
    kinesis.putRecord(recordParams, function (err, data) {
      if (err) {
        console.log(err);
      }
      else {
        console.log('Successfully sent data to Kinesis.');
      }
    });
  } catch (e) {
    console.log(e);
  }
};

//Obtener coordenadas de longitud y latitud
const handleData = (idCliente, token) => {
  let now = moment().format('YYYY-MM-DD HH:mm:ss');
  console.log('Tipo de variable now', typeof now);


  Geolocation.getCurrentPosition(
    (position) => {
      // Obtener latitud y longitud
      var latitud = position.coords.latitude;
      var longitud = position.coords.longitude;

      // Formato de los datos a enviar
      var data = {
        idCliente: idCliente,
        longitud: longitud,
        latitud: latitud,
        tiempo: now, 
        token: token
      }

      console.log('Handle data: ', data);
      sendRecord(data);
    }
  )
}

// Permisos para utilizar el GPS
let requestLocationPermission = async () => {
  try {
    const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
      {
        title: "Permiso para utilizar el GPS",
        message:
          "La aplicación necesita permisos para utilizar el GPS",
        buttonNeutral: "Preguntar más tarde",
        buttonNegative: "Cancelar",
        buttonPositive: "OK"
      }
    );
    if (granted === PermissionsAndroid.RESULTS.GRANTED) {
      console.log("Puede utilizar el GPS");
    } else {
      console.log("Acceso al GPS no permitido");
    }
  } catch (err) {
    console.warn(err);
  }
};

// Manejar el envio de los datos
const handleSendData = (idCliente,token) => {
  requestLocationPermission();
  handleData(idCliente,token);
}

export const LoginScreen = (props) => {
  let [clientId, setClientId] = useState('');
  let token = props.extraData;
  console.log('Token LS:', token); // HERE IS UNDEFINED THE FIRST EXECUTION
  return (

    <View style={styles.container}>
      <View>
        <Text style={styles.title}>
          App
        </Text>
      </View>
      <TextInput
        placeholder="Client ID ..."
        style={styles.inputs}
        onChangeText={text => setClientId(text)}
      />
      <TextInput
        placeholder="Password"
        style={styles.inputs}
        secureTextEntry={true} />
      <Button title="Login"
        onPress={() => {
          handleSendData(clientId, token);
          props.navigation.navigate('Login exitoso', { clientId: clientId });
        }
        }
      />
    </View>

  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  inputs: {
    borderColor: 'black',
    borderWidth: 1,
    padding: 5,
    textAlign: "center",
    marginTop: 3,
    marginBottom: 3,
    width: '40%'
  },
  title: {
    fontSize: 20
  }
});

export default LoginScreen;

Я хотел бы знать, что я должен сделать, чтобы этот токен имел соответствующее значение на экране входа в систему. Заранее благодарен за вашу помощь.