程序问答   发布时间:2022-06-02  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了React Native Expo浏览器永远加载没有应用程序日志大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

如何解决React Native Expo浏览器永远加载没有应用程序日志?

开发过程中遇到React Native Expo浏览器永远加载没有应用程序日志的问题如何解决?下面主要结合日常开发的经验,给出你关于React Native Expo浏览器永远加载没有应用程序日志的解决方法建议,希望对你解决React Native Expo浏览器永远加载没有应用程序日志有所启发或帮助;

我正在尝试学习 React Native。 早些时候我下载了一个示例项目,并为 TexTinput 组件提供了以下代码

import React,{ memo } from 'react';
import { VIEw,StyleSheet,Text } from 'react-native';
import { TexTinput as input } from 'react-native-paper';
import { theme } from '../core/theme';

type Props = React.ComponentProps<typeof input> & { errorText?: String };

const TexTinput = ({ errorText,...props }: Props) => (
  <VIEw style={styles.container}>
    <input
      style={styles.input}
      SELEctioncolor={theme.colors.priMary}
      underlinecolor="transparent"
      mode="outlined"
      {...props}
    />
    {errorText ? <Text style={styles.error}>{errorText}</Text> : null}
  </VIEw>
);

const styles = StyleSheet.create({
  container: {
    wIDth: '100%',marginVertical: 12,},input: {
    BACkgroundcolor: theme.colors.surface,error: {
    FontSize: 14,color: theme.colors.error,paddingHorizontal: 4,paddingtop: 4,});

export default memo(TexTinput);

并在屏幕上像下面一样使用它

        label="Email"
        returnKeyType="next"
        value={email.value}
        onChangeText={text => setEmail({ value: text,error: '' })}
        error={!!email.error}
        errorText={email.error}
        autoCAPItalize="none"
        autoCompleteType="email"
        textContentType="emailAddress"
        keyboardType="@R_358_2403@"
      />

我无法完全理解它,因为我觉得它有点复杂,所以我将文本输入组件更改为下面

import React,{FC,memo} from "react";
import {VIEw,StyleSheet} from "react-native";
import {themE} from "../core/theme";

interface Props {
    placeHolder: String;
    onChangeText: (text: String) => voID;
    secureTextEntry?: Boolean
}

const TexTinput :FC<Props> = (props) => {
    return (
        <VIEw>
            <TexTinput placeHolder={props.placeHolder} onChangeText={props.onChangeText} secureTextEntry={props.secureTextEntry || falsE}></TexTinput>
        </VIEw>
    )
}

export default TexTinput;

const styles = StyleSheet.create({
    container: {
        wIDth: '100%',input: {
        BACkgroundcolor: theme.colors.surface,error: {
        FontSize: 14,});

并在如下屏幕中使用它

      <TexTinput
          // placeHolder="name"
          // onChangeText={(text) => console.log(text)}/>

现在,当我在浏览器中重新加载它时,页面会继续加载几秒钟然后崩溃。 我看到以下错误

React Native Expo浏览器永远加载没有应用程序日志

在终端上也没有看到任何错误日志(我在博览会开始的地方)。我该如何调试?或者我的代码有什么问题?请帮忙 谢谢

解决方法

TLDR:完整的工作项目 here

在您的 custom TexTinput component 中,您将返回一个 TexTinput,如下图所示。但是 React-Native 不知道 TexTinput 是什么。

React Native Expo浏览器永远加载没有应用程序日志

React-Native 知道 <View>,因为你已经像下面这样在顶部导入了它

import {View,StyleSheet} from "react-native";

但它不知道 TexTinput 是什么。所以你需要导入它。

不要马上做

此外,您已经给了您的自定义组件名称“TexTinput”(在您的第二个代码块中),它与 React-Native 的核心组件之一“TexTinput”相同。因此,在这种情况下,您必须将此处的自定义组件名称 const TexTinput :FC<Props> = (props) => {... 重命名为 TexTinput 以外的任何名称,或者您需要使用如下别名从 react-native 导入 TexTinput:

import { View,TexTinput as Input } from 'react-native';
,

您的自定义组件名称错误 const TexTinput =

重命名为 CustomTexTinput

来自您的代码

//you Customcatomponent name is `TexTinput`!!!!!!!!!!!!!!!!!
const TexTinput :FC<Props> = (props) => {
    return (
        <View>
            <!--and also you use `TexTinput`!!!!!!!!!!!!! here from react-native-->
            <TexTinput .....></TexTinput>
        </View>
    )
}
export default TexTinput;

但是为什么你没有看到任何错误日志??????
错误应该是 undefined TexTinput 你没有导入它。
是因为您将 Customcatomponent 定义为 const TexTinput = ......,所以不会抛出错误。

大佬总结

以上是大佬教程为你收集整理的React Native Expo浏览器永远加载没有应用程序日志全部内容,希望文章能够帮你解决React Native Expo浏览器永远加载没有应用程序日志所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。