MainNavigation.js

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>
    )
  }
}

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

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上打开它，请进行相应设置，如果不设置，则默认为列表中的第一个。

App.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>

不变的违规元素类型无效，期望字符串响应本机

1 个答案:

MainNavigation.js

App.js

关闭标签