Question

我在屏幕上使用以下代码。我正面临以下问题，

不变违反：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记了从文件在其中定义。

上一个屏幕呈现良好。即使我删除了componentDidMount代码并删除了所有视图，但有条件地放置<BottomNavigagtion />并使其呈现良好，我可以看到结果。

import React, { PureComponent } from "react";
import {
  StyleSheet,
  Text,
  View,
  Button,
  ScrollView,
  Image
} from "react-native";
import {
  createBottomTabNavigator,
  createAppContainer,
  createStackNavigator,
  TouchableOpacity,
  ActivityIndicator
} from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";
import Icon from "react-native-vector-icons/Ionicons";
import { Provider } from "react-redux";
import { withNavigation } from "react-navigation";
import { createStore } from "redux";
import styles from "../styles";
import BottomNavigation from "../components/BottomNavigation";

import {
  RESOURCES_URL,
  APP_SETTINGS_URL,
  COUNTIES_URL
} from "../services/URLs";

class MoreScreen extends PureComponent {
  state = {
    // App General Settings
    app_settings: null,
    //Have a loading state where when data retrieve returns data.
    loading: true
  };
  async componentDidMount() {
    try {
      //Assign the promise unresolved first then get the data using the json method.
      // AppSettings Information

      const appSettingsApiCall = await fetch(APP_SETTINGS_URL);
      const appSettings = await appSettingsApiCall.json();

      this.setState({ app_settings: appSettings.data, loading: false });
    } catch (err) {
      console.log("Error fetching data-----------", err);
    }
  }
  render() {
    const { app_settings, loading } = this.state;
    if (!loading) {
      return (
        <ScrollView style={{ flex: 1, backgroundColor: "#f3f3f3" }}>
          <View style={styles.container}>
            <View
              style={{ flex: 1 }}
              data={app_settings}
              renderItem={this.renderItem}
            >
              <View style={styles.headerContainer}>
                <View style={styles.hamburgerContainer}>
                  <TouchableOpacity
                    style={styles.touchAbleContainer}
                    onPress={() => this.props.navigation.navigate("Welcome")}
                  >
                    <Image
                      style={styles.hamburger}
                      source={{ uri: RESOURCES_URL + "home.png" }}
                    />
                  </TouchableOpacity>
                </View>
                <View style={styles.logoContainer}>
                  <TouchableOpacity
                    style={styles.touchAbleContainer}
                    onPress={() => this.props.navigation.navigate("Welcome")}
                  >
                    <Image
                      style={styles.logo}
                      source={{ uri: RESOURCES_URL + "pinnacle-logo-blue.png" }}
                    />
                  </TouchableOpacity>
                </View>

                <BottomNavigation />
              </View>
            </View>
          </View>
        </ScrollView>
      );
    } else {
      return <ActivityIndicator />;
    }
  }
}

export default MoreScreen;

Answer 1

您正在从react-navigation包中导入ActivityIndicator，但我不认为它会导出它。不过它在“ react-native”包中：

import { ActivityIndicator } from 'react-native';

关于TouchableOpacity的同一句话。

不变违规元素类型无效，应为字符串，但未定义

1 个答案: