Question

我从ReactNative开始，尝试获得一个可以导航并使用内联的组件。

MyComp是组件。在“首页”中，我尝试通过按钮导航到MyComp并使其与。

内联。

App.js

import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Home from "./Home";
import MyComp from "./MyComp";

const navi = createStackNavigator({
    Home: {screen: Home},
    MyComp: {screen: MyComp}
});

const App = createAppContainer (navi);
export default App;

Home.js

import React from 'react';
import {StyleSheet, Text, View, Button, Alert} from 'react-native';
import {navigate} from 'react-navigation';
import {MyComp} from "./MyComp";

export default class Home extends React.Component
{
    static navigationOptions = {title: 'At Home'};

    render()
    {
        return (
            <View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}>
            <Button
                title={"Goto MyComp"} 
                onPress={() => this.props.navigation.navigate('MyComp')}/>

            <MyComp/>   {/* Compiler Error */}

            </View>
        );
  }
}

MyComp.js

import React from 'react';
import {Text, View, Button} from 'react-native';

export default class MyComp extends React.Component
{
    render()
    {
        return (
            <View>
            <Text>Here I am</Text>
            </View>
    );
  }
}

但是内联会产生错误。

不变违反：不变违反：元素类型无效：   预期的字符串（用于内置组件）或类/函数（用于   复合组件），但得到：未定义。您可能忘记了出口   您的组件来自定义它的文件，或者您可能已经混合了   设置默认名称并命名导入。

检查Home的呈现方法。

我不确定这是什么问题。不能同时使用两种组件吗？

Answer 1

当您在主屏幕中导入组件时，请删除括号

更改从“ ./MyComp”导入{MyComp}；

到从“ ./MyComp”导入MyComp；

ReactNative：组件内联和用于导航

1 个答案: