React Native 中未正确处理 TextInput 元素

Question

我有一个屏幕组件，它返回登录页面和用于填写表单的输入字段，这里是：

import React from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native"
import StartInput from '../components/StartInput';
import styled from "styled-components/native";

const BackgroundImage = styled.ImageBackground`
    width: 100%;
    height: 100%;
    flexDirection: row;
    justifyContent: center;
    alignItems: center;
`;

const LoginPage = () => {
    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    const [passwordError, setPasswordError] = React.useState('');

    return (
        <BackgroundImage source={require('../media/AikidoLogin.jpg')}>
            <View style={{flex: 1}}>
                <StartInput
                    containerStyle={{ marginHorizontal: 20 }}
                    placeholder={'Email'}
                    onChangeText={setEmail}
                    />
                <StartInput
                    containerStyle={{ marginHorizontal: 20, marginTop: 10 }}
                    placeholder={'Password'}
                    onChangeText={setPassword}
                    error={passwordError}
                    secureTextEntry
                    />
                <TouchableOpacity
                    style={styles.loginButton}
                    onPress={() => {
                        if (password.length < 6) {
                        setPasswordError('The password is to short');
                        } else {
                        setPasswordError('');
                        }
                    }}
                    >
                    <Text style={styles.buttonText}>Login</Text>
                </TouchableOpacity>                
            </View>
        </BackgroundImage>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white',
        justifyContent: 'center',
    },
    loginButton: {
        width: 100,
        paddingVertical: 10,
        borderRadius: 5,
        backgroundColor: 'dodgerblue',
        alignItems: 'center',
        alignSelf: 'center',
        marginTop: 20,
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
    },
});

export default LoginPage

这是 StartInput 组件：

import React from 'react';
import { Animated, TextInput, Text, View, TouchableOpacity, StyleSheet} from "react-native";
import { Icon } from "react-native-vector-icons/Ionicons";

const StartInput = ({ containerStyle, placeholder, onChangeText, error, ...props }) => {
    const [isFocused, setIsFocused] = React.useState(false);
    const [text, setText] = React.useState('');
    const [showPassword, setShowPassword] = React.useState(props.secureTextEntry);
    const labelPosition = React.useRef(new Animated.Value(text ? 1 : 0)).current;

    const handleFocus = () => {
        setIsFocused(true);
        animatedLabel(1);
    };

    const handleBlur = () => {
        setIsFocused(false);
        if (!text) {
            animatedLabel(0);
        }
    };

    const handleTextChange = (text) => {
        setText(text);
        if (onChangeText) {
            onChangeText(text);
        }
        if (text) {
            animatedLabel(1);
        } else {
            animatedLabel(isFocused ? 1 : 0);
        }
    };

    const animatedLabel = (toValue) => {
        Animated.timing(labelPosition, {
            toValue: toValue,
            duration: 200,
            useNativeDriver: false,
        }).start();
    };

    const labelStyle = {
            left: 10,
            top: labelPosition.interpolate({
                inputRange: [0, 1],
                outputRange: [17, 0],
            }),
            fontSize: labelPosition.interpolate({
                inputRange: [0, 1],
                outputRange: [16, 14],
            }),
            color: labelPosition.interpolate({
                inputRange: [0, 1],
                outputRange: ['gray', '#888'],
            }),
        };

    return (
        <View style={containerStyle}>
            <View style={[styles.innerContainer, error && { borderColor: 'red' }]}>
                <Animated.Text style={[styles.label, labelStyle]}>{placeholder}</Animated.Text>
                <View style={styles.inputContainer}>
                    <TextInput
                    {...props}
                    style={styles.input}
                    onFocus={handleFocus}
                    onBlur={handleBlur}
                    onChangeText={handleTextChange}
                    value={text}
                    textAlignVertical="center"
                    textContentType={props.secureTextEntry ? 'newPassword' : props.secureTextEntry}
                    secureTextEntry={showPassword}
                    />
                    {props.secureTextEntry && !!text && (
                    <View>
                        <TouchableOpacity
                        style={{ width: 24 }}
                        onPress={() => setShowPassword(!showPassword)}
                        >
                        {!showPassword ? (
                            <Icon name="eye-outline" color={'gray'} size={24} />
                        ) : (
                            <Icon name="eye-off-outline" color={'gray'} size={24} />
                        )}
                        </TouchableOpacity>
                    </View>
                    )}
                </View>
            </View>
            {error && <Text style={styles.errorText}>{error}</Text>}
        </View>
    );
};

    const styles = StyleSheet.create({
        innerContainer: {
        borderWidth: 1,
        borderColor: '#eee',
        borderRadius: 5,
        height: 60,
        justifyContent: 'center',
    },
    label: {
        position: 'absolute',
        color: 'gray',
    },
    inputContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingRight: 10,
    },
    input: {
        flex: 1,
        fontSize: 16,
        height: 50,
        marginTop: 10,
        paddingLeft: 10,
    },
    errorText: {
        marginTop: 5,
        fontSize: 14,
        color: 'red',
    },
});

export default StartInput;

当我在 Expo Go 上运行此命令时，第一个输入字段已正确处理，但第二个输入字段会发生以下情况：

我只是想用React Native编写一个应用程序，所以我不明白为什么会发生这个错误。请告诉我为什么会出现此错误以及如何修复它

Answer 1

错误应该出现在StartInput组件中Ionicons的导入语句处。

您可以将其更改为

import Icon from "react-native-vector-icons/Ionicons";

或

import { Ionicons } from "react-native-vector-icons";