我收到“不變違規”錯誤的渲染方法做錯了什么？

Question

我正在開始一個新的 React Native 項目，我使用了“expo init”並選擇了一個空白托管項目作為我的模板。 我有幾個來自不同項目的屏幕和組件，我想將它們復制到我的新項目中。 我收到以下錯誤：

不變違規：元素類型無效：預期為字符串（對於內置組件）或類/函數（對於復合組件），但得到：未定義。 您可能忘記從定義組件的文件中導出組件，或者您可能混淆了默認導入和命名導入。

檢查CreateAccountForm的渲染方法。

我不知道發生了什么事。 我很確定我的所有設置都與我在第一個項目中所做的完全一樣，這一切都很好。 我正在使用 React Navigation，我的新項目將“HomeScreen”渲染為“initialRouteName”。 但是，每當我嘗試將初始路由設置為“CreateNewAccountScreen”時，都會收到上述錯誤。

我已經對其進行了測試，只要它不嘗試渲染嵌套在其中的“CreateAccountForm”組件，“CreateNewAccountScreen”將呈現屬性作為我的初始路線。 用簡單的<Text>Hi!<Text>替換<CreateAccountForm>組件后，它與<Advertisement>組件一起毫無問題地渲染了屏幕。

主屏幕：

import React from 'react';
import { StyleSheet, Image, Button, View } from 'react-native';
import Advertisement from '../components/Advertisement';

const HomeScreen = ({navigation}) => {
return (
    <View style={styles.mainContainer}>
      <View style={styles.logoContainer}>
        <Image style={styles.logo}
        source={require('../assets/TPLookupLogo.png')} 
        style={{height: 200, width: 350, marginBottom: 40}} 
        resizeMode="contain">
        </Image>
      </View>
      <View style={styles.btnsContainer}>
        <Button 
        style={styles.button}
        appearance="outline"
        onPress={()=>{console.log('To New User')}}
        title='New User'
        />
        <Button 
        style={styles.button} 
        appearance="outline"
        onPress={()=>{console.log('To Login')}}
        title='Login'
        />
      </View>
      <View style={styles.adContainer}>
        <Advertisement/>
      </View>
    </View>
    );
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    justifyContent: 'center', 
    alignItems: 'center',
  },
  logoContainer: {
    flex: 4,
    justifyContent: 'flex-end', 
    alignItems: 'center'
  },
  btnsContainer: {
    flex: 4,
    width: '40%',
    justifyContent: 'flex-start', 
  },
  button: {
    marginVertical: 4,
    },
  adContainer: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: 'black'
  }
})

export default HomeScreen; 

應用導航器：

import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../screens/HomeScreen';
import CreateNewAccountScreen from '../screens/CreateNewAccountScreen';

const AppNavigator = createStackNavigator(
    {
    Home: HomeScreen,
    CreateNewAccount: CreateNewAccountScreen

    },
    {
      initialRouteName: 'CreateNewAccount'
    }
  )

  export default AppNavigator;

創建新帳戶屏幕：

import React from 'react';
import { StyleSheet, View } from 'react-native'
import CreateAccountForm from '../components/CreateAccountForm';
import Advertisement from '../components/Advertisement';

const CreateNewAccountScreen = () => {
    return (
        <View style={styles.mainContainer}>
         <View style={styles.formContainer}>
           <CreateAccountForm/>
         </View>
         <View style={styles.adContainer}>
           <Advertisement/>
         </View> 
       </View>     
     );
}



const styles = StyleSheet.create({
    mainContainer:{
      flex: 1,
    },
    formContainer: {
      flex: 8,
    },
    adContainer: {
      flex: 1,
      justifyContent: 'center',
      backgroundColor: 'black'
    }
  })

CreateNewAccountScreen.navigationOptions = {
    headerTitle: 'Create Account'
}

export default CreateNewAccountScreen;

創建帳戶表格：

import React, { useState } from 'react';
import { StyleSheet, View, Input, Button } from 'react-native';

const CreateAccountForm = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [company, setCompany] = useState('');
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [address, setAddress] = useState('');
    const [city, setCity] = useState('');
    const [stateName, setStateName] = useState('');
    const [zip, setZip] = useState('');

    const onChangeEmailHandler = value => {
        setEmail(value);
    }

    const onChangePasswordHandler = value => {
        setPassword(value);
    }

    const onChangeCompanyHandler = value => {
        setCompany(value);
    }

    const onChangeFirstNameHandler = value => {
        setFirstName(value);
    }

    const onChangeLastNameHandler = value => {
        setLastName(value);
    }

    const onChangeAddressHandler = value => {
       setAddress(value);
    }

    const onChangeCityHandler = value => {
        setCity(value);
    }

    const onChangeStateNameHandler = value => {
        setStateName(value)
    }

    const onChangeZipHandler = value => {
        setZip(value);
    }

    const RegisterUserHandler = props => {
        let emailLength = email.length;
        let passwordLength = password.length;
        if (emailLength === 0 || passwordLength === 0)
        {
            console.log('Email & Password cannot be blank.');
        }
        else
        {
            registerUser()
        }
    }

    async function registerUser () {
        let headers = {
            'X-Authorization': "",
            'Accept': 'application/json',
            'Content-Type': 'application/json',
            };
        let body = JSON.stringify({
            Email: email,
            Password: password,
            Company: company,
            FirstName: firstName,
            LastName: lastName,
            Address: address,
            City: city,
            State: stateName,
            Zipcode: zip
        })
        let response = await fetch('', 
        {
            method: 'POST',
            headers: headers,
            body: body
        });
        let responseJson = await response.json()
    }

    return (
        <View style={styles.mainContainer}>
                <Input
                style={styles.input}
                type="text"
                value={email}
                placeholder="Email"
                onChangeText={onChangeEmailHandler}
                />
                <Input
                style={styles.input}
                type="text"
                value={password}
                placeholder="Password"
                onChangeText={onChangePasswordHandler}
                />
                <Input
                style={styles.input}
                type="text"
                value={company}
                placeholder="Company"
                onChangeText={onChangeCompanyHandler}
                />
                <Input
                style={styles.input}
                value={firstName}
                placeholder="First Name"
                onChangeText={onChangeFirstNameHandler}
                />
                <Input
                style={styles.input}
                value={lastName}
                placeholder="Last Name"
                onChangeText={onChangeLastNameHandler}
                />
                <Input
                style={styles.input}
                value={address}
                placeholder="Address"
                onChangeText={onChangeAddressHandler}
                />
                <View style={styles.rowInputsContainer}>
                    <Input 
                    style={styles.input}
                    value={city}
                    style={styles.rowInput}
                    placeholder="City"
                    onChangeText={onChangeCityHandler}
                    />
                    <Input
                    style={styles.input}
                    value={stateName}
                    style={{...styles.rowInput, ...styles.centerRowInput}}
                    placeholder="State"
                    onChangeText={onChangeStateNameHandler}
                    />
                    <Input
                    style={styles.input}
                    value={zip}
                    style={styles.rowInput}
                    placeholder="Zip"
                    onChangeText={onChangeZipHandler}
                    />
                </View>
                <Button 
                style={styles.btn}
                onPress={RegisterUserHandler}
                title='Register'
                />
        </View>
    )   
}

const styles = StyleSheet.create({
    mainContainer: {
      flex: 1,
      width: '75%',
      alignSelf: 'center',
      justifyContent: 'center',
    },
    rowInputsContainer: {
        display: 'flex',
        flexDirection: 'row',
        marginBottom: 16
    },
    rowInput: {
        flexGrow: 1,
    },
    centerRowInput: {
        marginHorizontal: 4
    },
    input: {
        marginVertical: 8
    }
})

export default CreateAccountForm;

在我的第一個應用程序中，這種完全相同的設置使一切正常，沒有問題。 所以我不明白我哪里出錯了。 任何幫助，不勝感激，謝謝，平安！

Answer 1

React Native 有TextInput組件而不是Input組件。 您能否在將其導入CreateAccountForm時檢查一下。