React原生expo浏览器加载永远不会登录应用程序
React原生expo浏览器加载永远不会登录应用程序
提问于 2021-04-28 03:46:45
我正在尝试学习原生的react。之前，我下载了一个样例项目，并提供了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)}/>现在，当我在浏览器中重新加载它时，页面持续加载了几秒钟，然后崩溃了。我看到了下面的错误
我在终端上也没有看到任何错误日志(我在那里开始了世博会)。我该如何调试它？或者我的代码有什么问题？请帮帮忙谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-02 02:54:37
TLDR:完整的工作项目here
在您的custom TextInput component中，您将返回如下图所示的TextInput。但是React-Native并不知道TextInput是什么。
React-Native知道<View>，因为您已经在顶部导入了它，如下所示
import {View, StyleSheet} from "react-native";但是它不知道TextInput是什么。所以你需要导入它。
不要马上去做
此外，您已经为您的自定义组件命名为"TextInput“(在您的第二个代码块中)，它与React-Native "TextInput”的核心组件之一相同。因此，在这种情况下，您要么必须将此处的自定义组件名称重命名为TextInput以外的任何名称，要么需要使用如下别名从const TextInput :FC<Props> = (props) => {...导入TextInput：
import { View, TextInput as Input } from 'react-native';页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67289743
复制相关文章
相似问题
腾讯云开发者
