React native React本机expo浏览器永远加载应用程序上没有日志

我正在努力学习英语。 早些时候，我下载了一个示例项目，并为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);

但是我不能完全理解它，因为我认为它有点复杂，所以我将文本输入组件改为如下

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%',
        marginVertical: 12,
    },
    input: {
        backgroundColor: theme.colors.surface,
    },
    error: {
        fontSize: 14,
        color: theme.colors.error,
        paddingHorizontal: 4,
        paddingTop: 4,
    },
});

import React，{FC，memo}来自“React”；
从“react native”导入{View，StyleSheet}；
从“./core/theme”导入{theme}；
界面道具{
占位符：字符串；
onChangeText:（text:string）=>void；
secureTextEntry？：布尔值
}
常量文本输入：FC=（道具）=>{
返回(
)
}
导出默认文本输入；
const styles=StyleSheet.create({
容器：{
宽度：“100%”，
玛吉：12，
},
输入：{
背景色：theme.colors.surface，
},
错误：{
尺寸：14，
颜色：theme.colors.error，
填充水平：4，
paddingTop:4，
},
});

并在下面这样的屏幕上使用它

      <TextInput
          // placeHolder="Name"
          // onChangeText={(text) => console.log(text)}/>

console.log（text）}/>

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

我在终端上也没有看到任何错误日志（我从那里开始）。如何调试这个？或者我的代码有什么问题？请帮忙

---

谢谢

TLDR：完整的工作项目

在

自定义文本输入组件中

返回一个

文本输入

，如下图所示。但是React Native不知道TextInput是什么

React Native知道

，因为您在顶部导入了它，如下所示

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

但它不知道什么是

TextInput

。所以你需要导入它

不要马上做

此外，您还指定了自定义组件名称“TextInput”（在第二个代码块上），该名称与React Native“”的核心组件之一相同。因此，在这种情况下，您要么必须在此处将自定义组件名称重命名为TextInput以外的任何名称，要么需要使用如下别名从react native导入TextInput：

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

---

自定义组件名称中的错误

const TextInput=

重命名为name to

CustomTextInput

从你的代码

//您自定义的组件名称是“TextInput”！！！！！！！！！！！！！！！！！
常量文本输入：FC=（道具）=>{
返回(
)
}
导出默认文本输入；

但是为什么看不到任何错误日志？？？？
错误应该是

未定义的TextInput

您不导入它。
但是，由于您将CustomComponent定义为

const TextInput=…

，因此不会抛出错误

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