小编dou*_*mes的帖子

KeyboardAvoidingView + React 导航 + 安全区域视图 = 不起作用

我遇到的问题是,当使用嵌套react-navigation在选项卡导航器内的堆栈导航器来实现基本的聊天 UI 外观时,键盘隐藏了底部的聊天消息输入字段。因此,我尝试KeyboardAvoidingView将键盘调到可见位置,但键盘没有显示。我尝试了一个涉及添加headerHeightkeyboardVerticalOffsetprop 的解决方案,但似乎减少了大约 50px。例如,如果我添加headerHeight + 50keyboardVerticalOffset所有内容看起来都很棒,但如果我将设备切换到 iPhone 5 或其他设备,屏幕较小,安全区域插入不同等,键盘将再次处于错误位置。

我不确定罪魁祸首到底是什么,但我现在认为这是顶部和/或底部的 SafeArea 填充,我了解到这是“插图”。我正在尝试使用useSafeAreaInsets,但所有值都返回 0!我想使用这些插图添加到keyboardVerticalOffset道具中,以便避免视图正常工作。

我现在喜欢标签栏的样式,所以我想保持它的高度、填充和字体大小增加,但也许我在反应本机导航方面做错了?也许我无法像 React Native 那样拥有这个选项卡栏和堆栈导航器样式?无论如何,我相信插图应该返回一个值,所以我认为这就是问题所在。

请注意,如果我将<SafeAreaView>块移动到围绕<TouchableWithoutFeedback>,而不是围绕<NavigationContainer>块,并删除添加到 的 50 个额外像素keyboardVerticalOffset,则键盘会正确向上推输入字段,但 iPhone 11 上的选项卡栏图标会被压扁。当我写下这篇文章时,我注意到这个更改现在有底部/顶部填充变量返回值?如果然后删除tabBarOptions,我会得到可用的选项卡的基本外观,但我更喜欢初始选项卡的设计。

如何在每台设备上保持标签栏当前的样式并使键盘避开聊天输入字段?

(注意:useEffect下面的用法是我尝试使用本问题中概述的解决方案:https://github.com/th3rdwave/react-native-safe-area-context/issues/54

应用程序.js:

import React, { Component, useEffect, useState } from 'react';
import { View, KeyboardAvoidingView, TextInput, Text, Platform, TouchableWithoutFeedback, Keyboard, ActivityIndicator, SafeAreaView, ScrollView, Button, …
Run Code Online (Sandbox Code Playgroud)

react-native react-navigation react-native-safe-area-view

8
推荐指数
1
解决办法
1万
查看次数

登录时重定向 - React.js

在我的用户成功登录后(在 Login.js 内),我试图用 React Router 做一个简单的重定向,并防止用户重新访问登录页面(在 index.js 内)。

在 Login.js 中,我onSubmit={this.handleSubmit}在登录按钮标签内有handleSubmit(e)重定向功能。我在网上尝试了一些其他的解决方案,但我认为我对<Redirect/>组件用法的理解是错误的。

在 index.js 中,我有一个条件来测试用户是登录还是未登录,并且(很差地)提醒用户为什么他们无法访问所需的页面。我在 Youtube 视频中看到了这一点,但不确定这是否是获得所需效果的最佳方式。

目前,当我成功登录时,警报会You can't login if you are logged in!被触发,但我显然不希望在成功登录后立即触发警报,我希望首先触发重定向。如果我交换括号中的两个,React 会抛出错误。

如何在成功登录后立即触发重定向,但不发送警报You can't login if you are logged in!

Login.js 组件

import React, { Component } from 'react';
import fire from '../config/Fire.js';
import { Link, Redirect } from 'react-router-dom';
import PasswordMask from 'react-password-mask';

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.login = …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router react-router-dom

5
推荐指数
1
解决办法
6万
查看次数

部署到 Firebase 托管时,NODE_ENV 变量会自动设置为“生产”

我正在使用 Firebase 构建一个 React.js 应用程序,但无法弄清楚为什么当我在本地运行时,console.log(process.env.NODE_ENV)在 App.js 中总是返回development,但在部署到托管时它总是production

在我的 .env 文件中,我有NODE_ENV='production'NODE_ENV='development',我在构建之前根据我要部署到的 Firebase 项目别名进行更改。当我部署到我的 Firebase 开发项目时,我总是将 NODE_ENV 设置为“生产”,因为(我已经读过)NODE_ENV 在 npm 自动构建时被设置。有没有办法让我防止这种情况发生,所以当我部署时,它会保持不变development?或者也许我做错了?有什么帮助,谢谢!

.env

# Live
REACT_APP_FIREBASE_LIVE_API_KEY=..
REACT_APP_FIREBASE_LIVE_AUTH_DOMAIN=..
REACT_APP_FIREBASE_LIVE_DATABASE_URL=..

# Test 
REACT_APP_FIREBASE_TEST_API_KEY=..
REACT_APP_FIREBASE_TEST_AUTH_DOMAIN=..
REACT_APP_FIREBASE_TEST_DATABASE_URL=..

# Other
GENERATE_SOURCEMAP=false
NODE_ENV='production'
Run Code Online (Sandbox Code Playgroud)

node.js firebase reactjs firebase-hosting

5
推荐指数
0
解决办法
481
查看次数

Firebase 托管部署错误:任务 5fc ... 失败:6 次尝试后重试用尽

我正在尝试为生产和开发环境使用 Firestore、Functions、Storage 和 Hosting 设置 2 个全新的 Firebase 项目。我首先删除对旧 firebase 项目的引用: both firebase.json& .firebaserc。然后我跑去$ firebase init使用testFirebase 项目设置 Hosting、Functions、Storage 和 Firestore 。然后我设置 Firebase 别名以$ firebase use --add 在一个 React.js 项目中的两个项目之间切换。我 npm 构建并尝试使用: 进行部署$ firebase deploy --project:test,但主机不断尝试相同的最后一个文件并失败:Error: Task 5fcd... failed: retries exhausted after 6 attempts.

我已经看到了一些与服务器暂时关闭有关的 Stackoverflow 答案,但我没有看到他们这边的任何服务器问题(https://status.firebase.google.com/),而且这种情况以前一直存在。在我参与的另一个项目中,我试图在同一个 Firebase 项目上部署到 2 个托管目标,但是一个失败了,另一个工作正常,我遇到了同样的错误(我从来没有找到另一个解决方案)比不使用多个目标。)

我还可以测试什么才能使其正常工作?它是否在我的 React.js 代码库中?(我最近部署到我过去的项目中)也许与我的 Firebase 设置过程有关?或者仍然与旧的 Firebase 项目有联系?我不知道下一步该看什么来解决这个问题。任何方向都会很棒,谢谢!

Ps:可能无法连接的奇怪之处在于,如果我只运行$ firebase deploy,它不会部署 firebaserc 中定义的默认测试环境,而是实时测试环境?

.firebaserc:

{
  "projects": …
Run Code Online (Sandbox Code Playgroud)

firebase reactjs firebase-hosting google-cloud-firestore firebase-cli

4
推荐指数
2
解决办法
5386
查看次数

Firebase 函数上显示“错误:在建立安全 TLS 连接之前客户端网络套接字已断开”

我正在nodemailer为我的 React.js 项目使用 Firebase 函数(服务器端函数),但收到错误:Error: Client network socket disconnected before secure TLS connection was established...并导致一些电子邮件无法发送。这对于这个项目来说是一个大问题,因为客户端不能丢失从系统发送的电子邮件。为什么我会收到此错误以及如何补救?

Firebase 函数index.js:

"use strict";
import functions = require('firebase-functions');
import admin = require("firebase-admin");
import nodemailer = require('nodemailer');
import { DocumentSnapshot } from 'firebase-functions/lib/providers/firestore';
import { Change, EventContext } from 'firebase-functions';
import { Status } from './common';

admin.initializeApp(functions.config().firebase);

export const onUserCreated = functions.firestore.document('users/{userId}')
  .onCreate(async (snap: { data: () => any; }) => {
    console.log("Client create heard! Starting inner...")
    const newValue = …
Run Code Online (Sandbox Code Playgroud)

javascript node.js firebase nodemailer google-cloud-functions

3
推荐指数
1
解决办法
2万
查看次数