Question

我已按照文档操作并进行了必要的设置，但应用程序在启动时崩溃了。我无法弄清楚为什么会发生这种情况的问题。任何与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相同

Answer 1

少数技巧之一

<强> 1。将自定义URL方案添加到Xcode项目中：

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

此处有更多信息https://developers.google.com/identity/sign-in/ios/start-integrating

<强> 2。从xcode运行项目然后返回终端

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

尝试在react-native firebase

1 个答案: