大佬教程收集整理的这篇文章主要介绍了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)}/>
现在,当我在浏览器中重新加载它时,页面会继续加载几秒钟然后崩溃。 我看到以下错误
我在终端上也没有看到任何错误日志(我在博览会开始的地方)。我该如何调试?或者我的代码有什么问题?请帮忙 谢谢
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';
,
您的自定义组件名称错误 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,请注明来意。