Question

错误消息

不变违反：元素类型无效：
需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但是得到：未定义。

我想将用于stackNavigator的代码拆分到另一个文件。当我在一个文件中编写代码时，它可以正常工作，但是当我在另一个文件中编写代码并将其导入时，尽管它们是完全相同的代码，但仍显示错误。另外，当我将stackNavigator更改为switchNavigator和bottomTapNavigator等时，它们都可以正常工作。我不知道为什么只有stackNavigator返回未定义。甚至已经存在将“地图”导入到另一个文件的stackNavigator，并且可以正常工作。

当我搜索此错误时，我找到了写有关AppRegistry的代码的答案。

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Root />
      </Provider>
    )
  }
}

到

const App = () => (
  <Provider store={store}>
    <Root />
  </Provider>
)

export default App;
AppRegistry.registerComponent('Kickboard', () => App);

但这对我不起作用。除此之外，我没有找到似乎可以解决的问题的合适解决方案。

它在下面正常工作。这是抽屉导航器的一部分

import React, { Component } from 'react';
import {
    createDrawerNavigator,
    createAppContainer,
    createStackNavigator,
    DrawerItems
} from 'react-navigation';

import IssueRootStack from './IssueRootStack';
import * as DrawerContainer from '../containers/DrawerContainers'

import IconButton from '../components/IconButton/IconButton';
import { ScrollView, Text, View, SafeAreaView, Image } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import CouponNavigator from '../navigators/drawerNavigators/CouponNavigator';
import CouponContainer from '../containers/DrawerContainers/CouponContainer';
import CouponTemp from '../components/DrawerComponents/CouponTemp';

const DrawerRootStack = createDrawerNavigator({
    Map: IssueRootStack,
    Coupon: {
        screen: createStackNavigator(
            {
                Coupon: {
                    screen: CouponContainer,
                    navigationOptions: ({ navigation }) => ({
                        title: "Coupon", 
                        headerLeft: <IconButton
                            navigationProps={ navigation }
                            onPress={() => navigation.navigate('Map')}
                            icon={Platform.OS == 'ios' ? "ios-arrow-forward" : "arrow-forward"}
                        />,
                    }),
                },
                Coupon_0: {
                    screen: CouponTemp,
                    navigationOptions: ({ navigation }) => ({
                        title: "Coupon_0", 
                        headerLeft: <IconButton
                            navigationProps={ navigation }
                            onPress={() => navigation.goBack()}
                            icon={Platform.OS == 'ios' ? "ios-arrow-forward" : "arrow-forward"}
                            iconColor='#000000'
                        />,
                    }),
                },
                Coupon_1: {
                    screen: CouponTemp,
                    navigationOptions: ({ navigation }) => ({
                        title: "Coupon_1", 
                        headerLeft: <IconButton
                            navigationProps={ navigation }
                            onPress={() => navigation.goBack()}
                            icon={Platform.OS == 'ios' ? "ios-arrow-forward" : "arrow-forward"}
                            iconColor='#111111'
                        />,
                    }),
                }
            }
        ),
        navigationOptions: ({ navigation }) => ({
            drawerLabel: (
                <View style={{flex: 1, flexDirection: 'row', minHeight: 30, alignItems: 'center', paddingVertical: 15,}}>
                    <Ionicons name='ios-menu' style={{marginHorizontal: 20, color: 'red'}} />
                    <Text style={{fontWeight: 'bold', color: 'red'}}>Coupon</Text>
                </View>
            )
        })
    },
...

IssueRootStack

const IssueRootStack = createStackNavigator( ... )
export default IssueRootStack;

但是下面的代码无法正常工作。

const DrawerRootStack = createDrawerNavigator({
    Map: IssueRootStack,
    Coupon: {
        screen: CouponNavigator,
        navigationOptions: ({ navigation }) => ({
            drawerLabel: (
                <View style={{flex: 1, flexDirection: 'row', minHeight: 30, alignItems: 'center', paddingVertical: 15,}}>
                    <Ionicons name='ios-menu' style={{marginHorizontal: 20, color: 'red'}} />
                    <Text style={{fontWeight: 'bold', color: 'red'}}>Coupon</Text>
                </View>
            )
        })
    },
...

CouponNavigator

import React, { Component } from 'react';
import { createStackNavigator } from 'react-navigation';

import CouponContainer from '../../containers/DrawerContainers/CouponContainer';
import CouponTemp from '../../components/DrawerComponents/CouponTemp';
import { IconButton } from '../../components/IconButton/IconButton';

const CouponNavigator = createStackNavigator(
    {
        Coupon: {
            screen: CouponContainer,
            navigationOptions: ({ navigation }) => ({
                title: "Coupon", 
                headerLeft: <IconButton
                    navigationProps={ navigation }
                    onPress={() => navigation.navigate('Map')}
                    icon={Platform.OS == 'ios' ? "ios-arrow-forward" : "arrow-forward"}
                />,
            }),
        },
        Coupon_0: {
            screen: CouponTemp,
            navigationOptions: ({ navigation }) => ({
                title: "Coupon_0", 
                headerLeft: <IconButton
                    navigationProps={ navigation }
                    onPress={() => navigation.goBack()}
                    icon={Platform.OS == 'ios' ? "ios-arrow-forward" : "arrow-forward"}
                    iconColor='#000000'
                />,
            }),
        },
        Coupon_1: {
            screen: CouponTemp,
            navigationOptions: ({ navigation }) => ({
                title: "Coupon_1", 
                headerLeft: <IconButton
                    navigationProps={ navigation }
                    onPress={() => navigation.goBack()}
                    icon={Platform.OS == 'ios' ? "ios-arrow-forward" : "arrow-forward"}
                    iconColor='#111111'
                />,
            }),
        }
    }
);

export default CouponNavigator;

即使我以与IssueRootStack相同的方式使用它，也无法使用。例如

Coupon: CouponNavigator

我希望CouponNavigator被接受为导航器，而不是'undefined'。我不知道为什么它不起作用

Answer 1

const App = () => (
  <Provider store={store}>
    <Root />
  </Provider>
)

export default App;
AppRegistry.registerComponent('Kickboard', () => App);

本节介绍了此处的预防措施，即将注册‘Kickboard’移交给registercomponent的第一个参数。 -基于命令名称的cli init的本机反应在此处加入，项目将通过它运行。查找该模块内部ios的桥。这是默认设置，命名项目结尾。当然要进行修改，并且必须更正ios。另外，我可以看到App首先被渲染。

用法

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class App extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('yourprojectname', () => App);

createStackNavigator是一个返回React组件的函数。它需要一个路由配置对象，以及一个可选的选项对象（我们现在在下面省略）。由于createStackNavigator函数返回一个React组件，因此我们可以直接从App.js导出它，以用作我们应用程序的根组件。

示例

// In App.js in a new project

import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});

export default createAppContainer(AppNavigator); // you should be add createAppContainer

DrawerNavigaion

createDrawerNavigator(RouteConfigs, DrawerNavigatorConfig);

路线配置对象是从route name到route config的映射，它告诉导航者该路线要呈现的内容，请参见createStackNavigator中的示例。

示例

const RootStack = createDrawerNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    intialRouteName: 'Home',
    navigationOptions: {
      headerStyle : {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle : {
        color: 'white',
      },
    },
  }
);

您还可以自定义抽屉的形状。

示例

import { DrawerItems, SafeAreaView } from 'react-navigation';

const CustomDrawerContentComponent = props => (
  <ScrollView>
    <SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
      <DrawerItems {...props} />
    </SafeAreaView>
  </ScrollView>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

现在，您可以通过引用它们来重建内容。

为什么导入的stackNavigator返回未定义？

错误消息

1 个答案: