React Native 错误 - “尝试导入错误：'Item' 未从 'native-base' 导出。”

Question

This is all the importing i did for my Code

`

import React from "react";

import {
  TouchableOpacity,
  TouchableWithoutFeedback,
  StyleSheet,
  Text,
  SafeAreaView,
  StatusBar,
  KeyboardAvoidingView,
  Keyboard,
  View,
  Alert,
  Modal,
  FlatList,
  Animated,
} from "react-native";

import { Ionicons } from "@expo/vector-icons";

import { Container, Item, Input } from "native-base";

//AWS Amplify modular import
import data from "./countriesData.js";

//Load the app logo
const logo = require("./images/Triton Logo border.png");

`

I'm not copying the full rendering, but i am going to paste here the Item part i'm getting an error from

`

<Item style={styles.itemStyle}>
                    <Ionicons name="ios-person" style={styles.iconStyle} />
                    <Input
                      style={styles.input}
                      placeholder="Username"
                      placeholderTextColor="#adb4bc"
                      keyboardType={"email-address"}
                      returnKeyType="next"
                      autoCapitalize="none"
                      autoCorrect={false}
                      onSubmitEditing={(event) => {
                        this.refs.SecondInput._root.focus();
                      }}
                      onChangeText={(value) =>
                        this.onChangeText("username", value)
                      }
                      onFocus={() => this.fadeOut()}
                      onEndEditing={() => this.fadeIn()}
                    />
                  </Item>

`

For some reason i get an error saying:

Attempted import error: 'Item' is not exported from 'native-base'.
  192 |                 <View style={styles.container}>
  193 |                   {/* username section  */}
> 194 |                   <Item style={styles.itemStyle}>
      |                   ^
  195 |                     <Ionicons name="ios-person" style={styles.iconStyle} />
  196 |                     <Input
  197 |                       style={styles.input}

I'm just not getting what the problem is. I've tried to install native-base on NPM but it's not working Maybe it's something i have deep in the code, i need help please, Anybody with ReactNative experience can help me on this problem. i would appreciate it a lot.

Answer 1

You are getting this error because you are trying to import <Item> that is not present in NativeBase v3 . either downgrade NativeBase to v2 or
keep NativeBase v3 and replace Form with FormControl as mentioned in the docs .

In your case like this:

<FormControl>
      <Stack style={styles.itemStyle}>     
          <Ionicons name="ios-person" style={styles.iconStyle} />   
          <Input
                      style={styles.input}
                      placeholder="Username"
                      placeholderTextColor="#adb4bc"
                      keyboardType={"email-address"}
                      returnKeyType="next"
                      autoCapitalize="none"
                      autoCorrect={false}
                      onSubmitEditing={(event) => {
                        this.refs.SecondInput._root.focus();
                      }}
                      onChangeText={(value) =>
                        this.onChangeText("username", value)
                      }
                      onFocus={() => this.fadeOut()}
                      onEndEditing={() => this.fadeIn()}
                    />      
      </Stack>
    </FormControl>