React Native 文本輸入錯誤：文本字符串必須在<text>零件</text>

Question

我是 React Native 的初學者，我正在嘗試在我的應用程序上構建一個注冊頁面。

此頁面在 Chrome 瀏覽器中工作，它確實連接到 Express 服務器並在 MongoDB 中推送數據，盡管它在 Chrome 控制台中發出警告： index.js:1 Unexpected text node: A text node cannot be a child of a <View>. ，每次我在email輸入中使用@時都會出現這個錯誤，當我在用戶名和密碼輸入中使用其他一些字符時也會隨機出現。

但是當我在我的手機上使用 Expo Go 做同樣的事情時，即當我在三個文本輸入中輸入@或其他類型的輸入時，這個應用程序直接崩潰......，錯誤消息是Error: Text strings must be rendered within a <Text> component. .

我不確定該頁面的哪個部分會導致這樣的錯誤，因為我確實使用文本組件來包裝它們的內容。

我的代碼是：

import React, { useState } from "react";
import { Button, StyleSheet, Text, TextInput, View } from "react-native";
import { useValue } from "./ValueContext";
import Axios from "axios";


const RegisterScreen = ({ navigation, route }) => {

    const { currentValue, setCurrentValue } = useValue()
    const [name, setName] = useState("");
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [result, setResult] = useState(0);

    const validateEmail = (value) => {
        if (value !== "") {
            let re = /@+/
            let cond = re.test(value)
            if (!cond) {
                return (<View>
                    <Text style={{ color: "red" }}>Email should contain @ </Text>
                </View>)
            } else {
                return (<View> </View>)
            }
        } else {
            return (<View>
                <Text style={{ color: "red" }}>Email is required </Text>
            </View>);
        }
    }

    const validateName = (value) => {
        if (value !== "") {
            let c = value[0].toLowerCase();
            let cond = "a" <= c && c <= "z"
            if (!cond) {
                return (<View>
                    <Text style={{ color: "red" }}>Username can only start with a character </Text>
                </View>);
            } else {
                return (<View></View>);
            }
        } else {
            return (<View>
                <Text style={{ color: "red" }}>UserName is required </Text>
            </View>);
        }
    }
    const validatePassword = (value) => {
        if (value !== "") {
            let re1 = /[a-zA-Z]+/
            let re2 = /[0-9]+/
            let re3 = /[!@#$%^&*]+/
            let cond = re1.test(value) && re2.test(value) && re3.test(value)
            if (!cond) {
                return (<View>
                    <Text style={{ color: "red" }}>Password should contain at least one character, one number and one special character</Text>
                </View>);
            } else {
                return (<View></View>)
            }
        } else {
            return (<View>
                <Text style={{ color: "red" }}>Password is required </Text>
            </View>);
        }
    }

    const displayResult = (value) => {
        if (value === 0) {
            return (<View></View>)
        } else if (value === 1) {
            return (<View>
                <Text style={{ color: "red" }}> Registration is successful! Please Login</Text>
                <Button
                    title="Login In"
                    onPress={() => navigation.navigate('Login', { version: "CPA 5.0" })}
                />
            </View>)
        } else if (result === 2) {
            return (<View>
                <Text style={{ color: "red" }}>Registration failed, this email has ready linked to one account, please go to login</Text>
                <Button
                    title="Login In"
                    onPress={() => navigation.navigate('Login', { version: "CPA 5.0" })}
                />
            </View>)
        }
    }

    const userRegistration = async () => {
        try {
            let serverURL = currentValue.serverURL;

            const registerStatus = await Axios({
                method: "post",
                url: "/register",
                baseURL: serverURL,
                data: { userEmail: email, userName: name, userPassword: password },
            });
            if (registerStatus.data["status"] === true) {
                // console.log("case1")
                setResult(1)
            } else {
                // console.log('case2')
                setResult(2)
            }
        } catch (error) {
            console.log(error);
        }
    }

    return (
        <View style={styles.container}>
            <View style={{ alignItems: "center" }}>
                <Text style={{ fontSize: 20, textAlign: "center" }}>Unit Converter version <Text style={{ color: "red" }}>{route.params.version}</Text></Text>
            </View>

            <View>
                <Text style={{ fontSize: 20, textAlign: "center" }}>Register an account here</Text>
            </View>

            <View style={{ flexDirection: "row", justifyContent: "center" }}>
                <Text style={{ fontSize: 15 }}>Enter Your Email </Text>
                <TextInput
                    placeholder="Enter your email"
                    onChangeText={(email) => { setEmail(email) }}
                    value={email}
                    style={{ fontSize: 15 }}
                />
            </View>

            {validateEmail(email)}

            <View style={{ flexDirection: "row", justifyContent: "center" }}>
                <Text style={{ fontSize: 15 }}>Enter Your Name </Text>
                <TextInput
                    placeholder="Enter your name"
                    onChangeText={(name) => { setName(name) }}
                    value={name}
                    style={{ fontSize: 15 }}
                />
            </View>

            {validateName(name)}

            <View style={{ flexDirection: "row", justifyContent: "center" }}>
                <Text style={{ fontSize: 15 }}>Enter Your Password </Text>
                <TextInput
                    placeholder="Enter your password"
                    onChangeText={(password) => { setPassword(password) }}
                    value={password}
                    style={{ fontSize: 15 }}
                    secureTextEntry={true}
                />
            </View>

            {validatePassword(password)}
            <Button
                title="Register"
                onPress={() => {
                    userRegistration();
                }}
            />
            {displayResult(result)}


        </View>
    );
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        alignItems: "center",
        justifyContent: 'flex-start',
        backgroundColor: "grey",
    },
});

export default RegisterScreen;

上面提到的錯誤信息是：

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTView (at View.js:34)
    in View (at register.js:33)
    in RCTView (at View.js:34)
    in View (at register.js:111)
    in RegisterScreen (at SceneView.tsx:126)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:119)
    in EnsureSingleNavigator (at SceneView.tsx:118)
    in SceneView (at useDescriptors.tsx:209)
    in RCTView (at View.js:34)
    in View (at DebugContainer.native.tsx:27)
    in DebugContainer (at NativeStackView.native.tsx:71)
    in MaybeNestedStack (at NativeStackView.native.tsx:229)
    in RNSScreen (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (at src/index.native.tsx:147)  
    in Screen (at NativeStackView.native.tsx:175)
    in SceneView (at NativeStackView.native.tsx:277)
    in RNSScreenStack (at NativeStackView.native.tsx:268)
    in NativeStackViewInner (at NativeStackView.native.tsx:322)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (at SafeAreaProviderCompat.tsx:46)
    in SafeAreaProviderCompat (at NativeStackView.native.tsx:321)
    in NativeStackView (at createNativeStackNavigator.tsx:67)
    in NativeStackNavigator (at App.js:33)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in ForwardRef(BaseNavigationContainer) (at NavigationContainer.tsx:132)
    in ThemeProvider (at NavigationContainer.tsx:131)
    in ForwardRef(NavigationContainerInner) (at App.js:32)
    in ValueProvider (at App.js:31)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in DevAppContainer (at AppContainer.js:121)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

和

index.js:1 Unexpected text node:  . A text node cannot be a child of a <View>.
console.<computed> @ index.js:1
error @ react-native-logs.fx.ts:34
(anonymous) @ index.js:94
(anonymous) @ index.js:92
renderWithHooks @ react-dom.development.js:14803
updateForwardRef @ react-dom.development.js:16816
beginWork @ react-dom.development.js:18645
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
flushPendingDiscreteUpdates @ react-dom.development.js:21847
flushDiscreteUpdates @ react-dom.development.js:21827
finishEventHandler @ react-dom.development.js:764
batchedEventUpdates @ react-dom.development.js:798
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568
attemptToDispatchEvent @ react-dom.development.js:4267
dispatchEvent @ react-dom.development.js:4189
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
discreteUpdates$1 @ react-dom.development.js:21887
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

Answer 1

您正在嘗試在此處動態插入文本。它實際上可以在您的瀏覽器上運行，因為您的瀏覽器非常了解 HTML，但您的手機在本機反應中並不如此，每個文本組件都應該包含在一個組件中

<Text>{Validate()}</Text>