反应本机自定义组件道具不起作用

Posted 2023-02-23

【中文标题】反应本机自定义组件道具不起作用

【英文标题】：React native custom component props not working

【发布时间】：2021-10-23 14:16:39

【问题描述】：

嘿，所以我正在尝试使用自定义文本输入并为其提供 autoCorrect、autoCapitalise 等道具，但由于某种原因无法正常工作，只有当我直接在从 react native 模块导入的原始 TextInput 上使用它们时才有效。这是我如何做的代码。请帮我看看我在哪里或做错了什么。

import React from 'react';
import  Image, StyleSheet, View  from 'react-native';
import AppTextInput from '../components/AppTextInput';
import  Formik  from 'formik';
import * as Yup from 'yup';
import Screen from '../components/Screen';
import AppBtn from '../components/AppBtn';
import AppText from '../components/AppText';

const validationSchema = Yup.object().shape(
  email: Yup.string().required().email().label('Email'),
  password: Yup.string().required().min(4).label('Password'),
);

export default function LoginScreen() 
  const img = require('../assets/logo.png');

  return (
    <Screen>
      <Image source=img style=styles.logo />

      <Formik
        initialValues= email: '', password: '' 
        onSubmit=(values) => console.log(values)
        validationSchema=validationSchema>
        ( handleChange, handleSubmit, errors ) => (
          <>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect=false
              icon="email"
              onChangeText=handleChange('email')
              keyboardType="email-address"
              placeholder="email"
            />
            <AppText style= color: 'red' >errors.email</AppText>
            <AppTextInput
              autoCapitalize="none"
              autoCorrect=true
              icon="lock"
              keyboardType="numeric"
              onChangeText=handleChange('password')
              secureTextEntry=true
              placeholder="password"
            />
            <AppText style= color: 'red' >errors.password</AppText>
            <View style=styles.btn>
              <AppBtn title="Login" onPress=handleSubmit />
            </View>
          </>
        )
      </Formik>
    </Screen>
  );

然后appTextInput本身就是这个

import  StyleSheet, Text, TextInput, View  from 'react-native';
import  MaterialCommunityIcons  from '@expo/vector-icons';

export default function AppTextInput( icon, placeholder ) 
  return (
    <View style=styles.container>
      /* render only if icon is defined */
      icon && (
        <MaterialCommunityIcons name=icon size=40 style=styles.icon />
      )
      <TextInput style= fontSize: 25  placeholder=placeholder />
    </View>
  );

我哪里出错了？即使没有formik 和是的，它仍然拒绝通过控制台从输入字段中注销值。提前感谢您的帮助:)

【参考方案1】：

为了使这些道具起作用，您必须将它们提供给实际的TextInput 组件。在您的LoginScreen 组件中，您使用的是正确的AppTextInput。

但是在您的 AppTextInput 组件中，您只处理两个道具，icon 和 placeholder。要使其他 TextInput 道具工作，您必须将它们提供给您的 TextInput 组件。

import  StyleSheet, Text, TextInput, View  from 'react-native';
import  MaterialCommunityIcons  from '@expo/vector-icons';

export default function AppTextInput(props) 
  const  icon, placeholder  = props;
  return (
    <View style=styles.container>
      /* render only if icon is defined */
      icon && (
        <MaterialCommunityIcons name=icon size=40 style=styles.icon />
      )
      <TextInput
        ...props
        style= fontSize: 25 
        placeholder=placeholder
      />
    </View>
  );

在这里，我使用 ...props 将传递的道具添加到TextInput 组件。现在你的 props 也被传递给 TextInput 组件，它应该可以按预期工作。