Question

我正在尝试学习 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="email-address"
      />

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

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,
    },
});

并在如下屏幕中使用它

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

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

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

Answer 1

TLDR：完整的工作项目 here

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

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';

Answer 2

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

重命名为 CustomTextInput

来自您的代码

//you CustomComponent 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 你没有导入它。
但是因为您将 CustomComponent 定义为 const TextInput = ......，所以不会抛出错误。

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

2 个答案: