尝试在 React-Native Firebase 中使用电话身份验证时,iOS 模拟器中的应用程序崩溃

2024-04-21

我已按照文档进行操作并进行了必要的设置,但应用程序在启动时崩溃了。我无法弄清楚为什么会发生这种情况。有人使用过 rnfirebase 吗?面临这个问题?

import React, { Component } from 'react';
import { View, Button, Text, TextInput, Image } from 'react-native';

import firebase from 'react-native-firebase';

const successImageUri = 'https://cdn.pixabay.com/photo/2015/06/09/16/12/icon-803718_1280.png';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.unsubscribe = null;
    this.state = {
      user: null,
      message: '',
      codeInput: '',
      phoneNumber: '+44',
      confirmResult: null
    };
    firebase.initializeApp({
      apiKey: 'AIzaSyAvKPtsqqqGjkGLkXD8BeqOR6GwJaI2AcE',
      appId: '1:170852024080:ios:9bb19d2f74715186',
      messagingSenderId: '170852024080',
      projectId: 'chatapp-7c693',
      authDomain: 'chatapp-7c693.firebaseapp.com',
      databaseURL: 'https://chatapp-7c693.firebaseio.com',
      storageBucket: 'chatapp-7c693.appspot.com'
    });
  }

  componentDidMount() {
    this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({ user: user.toJSON() });
      } else {
        // User has been signed out, reset the state
        this.setState({
          user: null,
          message: '',
          codeInput: '',
          phoneNumber: '+44',
          confirmResult: null
        });
      }
    });
  }

//This is the example from the docs, so it must work

  componentWillUnmount() {
    if (this.unsubscribe) this.unsubscribe();
  }

  signIn = () => {
    const { phoneNumber } = this.state;
    this.setState({ message: 'Sending code ...' });

    firebase
      .auth()
      .signInWithPhoneNumber(phoneNumber)
      .then(confirmResult => this.setState({ confirmResult, message: 'Code has been sent!' }))
      .catch(error =>
        this.setState({ message: `Sign In With Phone Number Error: ${error.message}` })
      );
  };

  confirmCode = () => {
    const { codeInput, confirmResult } = this.state;

    if (confirmResult && codeInput.length) {
      confirmResult
        .confirm(codeInput)
        .then(user => {
          this.setState({ message: 'Code Confirmed!' });
        })
        .catch(error => this.setState({ message: `Code Confirm Error: ${error.message}` }));
    }
  };

  signOut = () => {
    firebase.auth().signOut();
  };

  renderPhoneNumberInput() {
    const { phoneNumber } = this.state;

    return (
      <View style={{ padding: 25 }}>
        <Text>Enter phone number:</Text>
        <TextInput
          autoFocus
          style={{ height: 40, marginTop: 15, marginBottom: 15 }}
          onChangeText={value => this.setState({ phoneNumber: value })}
          placeholder={'Phone number ... '}
          value={phoneNumber}
        />
        <Button title="Sign In" color="green" onPress={this.signIn} />
      </View>
    );
  }

  renderMessage() {
    const { message } = this.state;

    if (message.length) return null;

    return <Text style={{ padding: 5, backgroundColor: '#000', color: '#fff' }}>{message}</Text>;
  }

  renderVerificationCodeInput() {
    const { codeInput } = this.state;

    return (
      <View style={{ marginTop: 25, padding: 25 }}>
        <Text>Enter verification code below:</Text>
        <TextInput
          autoFocus
          style={{ height: 40, marginTop: 15, marginBottom: 15 }}
          onChangeText={value => this.setState({ codeInput: value })}
          placeholder={'Code ... '}
          value={codeInput}
        />
        <Button title="Confirm Code" color="#841584" onPress={this.confirmCode} />
      </View>
    );
  }

  render() {
    const { user, confirmResult } = this.state;
    return (
      <View style={{ flex: 1 }}>
        {!user && !confirmResult && this.renderPhoneNumberInput()}

        {this.renderMessage()}

        {!user && confirmResult && this.renderVerificationCodeInput()}

        {user && (
          <View
            style={{
              padding: 15,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#77dd77',
              flex: 1
            }}
          >
            <Image
              source={{ uri: successImageUri }}
              style={{ width: 100, height: 100, marginBottom: 25 }}
            />
            <Text style={{ fontSize: 25 }}>Signed In!</Text>
            <Text>{JSON.stringify(user)}</Text>
            <Button title="Sign Out" color="red" onPress={this.signOut} />
          </View>
        )}
      </View>
    );
  }
}

有人可以帮忙吗?我再次检查了文档..但没有帮助?idk 我还应该添加哪些详细信息..这是我的第一个问题 流量过大..不知道问问题这么烦人... 我尝试了 Web Firebase sdk 并且可以使用匿名登录..但我需要电话身份验证,但我无法完成,因为它对 ios 和 android 有不同的设置...rnfirebase 应该与 Web sdk 相同


几个技巧之一就可以了

1. 将自定义 URL 方案添加到您的 Xcode 项目:

  • 打开您的项目配置:双击项目名称 左侧树视图。从“目标”部分选择您的应用程序,然后 选择“信息”选项卡,然后展开“URL 类型”部分。
  • 单击 + 按钮,并为反向客户端 ID 添加 URL 方案。 要找到该值,请打开GoogleService-Info.plist配置 文件,然后查找REVERSED_CLIENT_ID钥匙。复制它的值 键,并将其粘贴到配置页面上的 URL 方案框中。 将其他字段留空。

更多信息在这里https://developers.google.com/identity/sign-in/ios/start-integrating https://developers.google.com/identity/sign-in/ios/start-integrating

2. 从 xcode 运行项目然后返回终端

使用 Xcode,确保您打开的是工作区文件而不是项目文件。运行它,一旦成功构建,关闭 Xcode 返回终端react-native run-ios

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

尝试在 React-Native Firebase 中使用电话身份验证时,iOS 模拟器中的应用程序崩溃 的相关文章

随机推荐