当有条件地渲染每个包含 react-native-elements <Input> 的两个组件时,激活一个会导致组件异常/非渲染

问题描述

这是父组件。我有条件地渲染并基于 onPress 改变 signInActive 状态真/假。

     <View>
    {signInActive ? (
      <View>
        <SignIn />
      </View>
    ) : (
      <View>
        <Registration />
      </View>
    )}
  </View>

这是为上述真实情况呈现的工作组件:SignIn 组件

 <View style={styles.inputContainer}>
    <Input
      autofocus
      placeholder="Email"
      // value={email}
      // onChangeText={(e) => setEmail(e.target.value)}
    />
    <Input
      style={styles.bottomInput}
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

这是来自false conditional case Registration组件的非渲染组件……完全一样。

<View style={styles.inputContainer}>
    <Input
      autofocus
      placeholder="Email"
      // value={email}
      // onChangeText={(e) => setEmail(e.target.value)}
    />
    <Input
      style={styles.bottomInput}
      secureTextEntry
      placeholder="Password (8 or more characters)"
    />
  </View>

错误Component Exception: Element type is invalid: expected a string (for built-in component) or a class/function but got: undefined. You likely forgot to export your component from the file it's define in.

父组件渲染

解决方法

解决方案:从 react-native-elements 导入的 Input 在 import 语句中没有正确解构。导入而不是 {导入}