react-native - 不变违规元素类型无效预期字符串反应本机

Question

所以这是我在 react-native 中的第一个应用程序，我遇到了以下错误。

过去几天我一直在尝试解决这个错误，但运气不佳。

下面是我的 MainNavigator.js 的副本：

import DlLoading_2 from "./src/screens/DlLoading_2";
import DlMain from "./src/screens/DlMain";
import { createStackNavigator, createAppContainer } from "react- 
navigation";

const MainNavigator = createStackNavigator({
    DlLoading_2: {
      screen: DlLoading_2
    },
    DlMain: {
      screen: DlMain
    }
  },
  {
    headerMode: "none"
  }
  );

  export default createAppContainer(MainNavigator);
    render() ;
      return (
      < MainNavigator />
    ) ;

这是我打开页面的副本：

import React, { Component } from "react";
import { Center } from "@builderx/utils";
import { View, StyleSheet, Image, Text } from "react-native";
import { createAppContainer } from 'react-navigation';
import { MainNavigation } from '../screens/MainNavigator';
import { TouchableHighlight } from 'react-native'
import { AppContainer } from "../screens/MainNavigator"

const AppContainer = createAppContainer(MainNavigation);

export default class DlLoading_2 extends Component {
  render() {
    return (
      <AppContainer/>
      <View style={styles.root}>
        <Center />
          <TouchableHighlight onPress={() => 
this.navigation.navigate('DlMain')}/>
            <Image style={styles.blueDisk} source= . 
  {require('../assets/ComponentTMP_0-image.jpg')}/>
          <TouchableHighlight/>
        <Center horizontal> 
          <Image
                source={require("../assets/ComponentTMP_0- 
   image2.png")}
            style={styles.dlLogo}
          />
        </Center> 
        <Center horizontal>
        <Text style={styles.text}>TRANSINDENTAL 
MEDITATION</Text>
        </Center>
        <AppContainer/>
      </View>
    )
  }
}

对此错误的任何帮助将不胜感激！提前致谢。

标签： react-nativeexpo

Answer 1

这几乎没有什么问题。让我们依次看一下每个文件

MainNavigation.js

您已经正确设置了 MainNavigator，但是您没有以这种方式设置 AppContainer。

这就是我将如何设置你的MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens, config);
export default createAppContainer(MainNavigator);

我更喜欢将所有内容分开，以便轻松查看所有内容。createAppContainer只是包装MainNavigator你不需要像你所做的那样设置渲染函数，因为它没有被使用并且可能导致代码错误。

在 MainNavigator 的选项中，您可以设置initalRouteName应用程序打开的位置。如果您想在Screen2相应的设置上打开它，如果您不设置它，它将默认为列表中的第一个。

应用程序.js

您已经放入了您的AppContainer，但是您<View>在它下面有这个，它由许多东西组成，包括另一个AppContainer，其中许多标签没有正确关闭。

我认为 中的内容View应该在 MainNavigator 的另一个屏幕上，该屏幕设置为您的initialRouteName.

这就是我设置的方式App.js，你在这里真的不需要更多。

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
    }
  }
  
  render() {
    return (
      <AppContainer />
    )
  }
} 

这是一个允许您从 Screen1 导航到 Screen2 并返回的小吃

https://snack.expo.io/r1FqD8VX4

结束标签

当您打开组件的标签时，就像这样View打开它们

<View>

当您关闭标签时，View它们会像这样关闭

</View>

这些标签之间包含的任何内容都称为该组件的子组件，并且可以在该组件内部通过this.props.children.

并非所有组件都需要带子组件，就像Button组件一样。它像这样用一个标签打开和关闭

<Button onPress={} title={'title'} />

如果您正在考虑使用TouchableHighlight这就是您将如何编写代码以便正确包装您的图像

<TouchableHighlight onPress={() => this.props.navigation.navigate('DlMain')}>
    <Image style={styles.blueDisk} source={require('../assets/ComponentTMP_0-image.jpg')}/>
</TouchableHighlight>