Javascript 在react native中将值从一个文件导入到另一个文件时发出

我正在学习ReactNative，现在我正在研究如何组织文件（现在我将为每个页面创建一个文件夹，每个页面都有一个索引、函数和样式文件）。但是，由于某些原因，我无法将信息导入到

index.js

，无法使用样式或函数，当我打开页面时，它不会返回func方法

我想知道我是否使用了导入错误。使用“./Menu”中的

import{menuffunctions}导致错误，表示未导入任何内容，此错误不再出现，但仍未返回任何内容

这是我的代码，索引，菜单和样式都在同一个文件夹中

index.js

import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';

export default class MenuPage extends React.Component {
    render(){
        return(
            <View>
                <Text> Text: {MenuFunctions.func} </Text>
            </View>
        );
    }
}

import React from 'react';

export default class MenuFunctions extends React.Component{
    constructor(props){
        super(props);
    }

    func = () => {return "Hello, World!"};
}

import React from 'react';
import { StyleSheet } from 'react-native';

export default class MenuStyles extends React.Component{
    styles = StyleSheet.create({
        text: {
            color: "red",
        }
    });
}

styles.js

import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';

export default class MenuPage extends React.Component {
    render(){
        return(
            <View>
                <Text> Text: {MenuFunctions.func} </Text>
            </View>
        );
    }
}

import React from 'react';

export default class MenuFunctions extends React.Component{
    constructor(props){
        super(props);
    }

    func = () => {return "Hello, World!"};
}

import React from 'react';
import { StyleSheet } from 'react-native';

export default class MenuStyles extends React.Component{
    styles = StyleSheet.create({
        text: {
            color: "red",
        }
    });
}

Menu.js
和
styles.js
不应该是
React.Component
并且您忘记调用
Func
方法，
（）
丢失

React.Component
只是一个UI组件，它包含一个返回
JSX
元素的呈现方法

您的代码应该如下所示：

index.js

import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';

export default class MenuPage extends React.Component {
    render(){
        return(
            <View>
                <Text> Text: {MenuFunctions.func} </Text>
            </View>
        );
    }
}

import React from 'react';

export default class MenuFunctions extends React.Component{
    constructor(props){
        super(props);
    }

    func = () => {return "Hello, World!"};
}

import React from 'react';
import { StyleSheet } from 'react-native';

export default class MenuStyles extends React.Component{
    styles = StyleSheet.create({
        text: {
            color: "red",
        }
    });
}


从“React”导入React；
从“./菜单”导入菜单功能；
从“./样式”导入菜单样式；
从“react native”导入{Text，View}；
导出默认类MenuPage扩展React.Component{
render（）{
返回(
文本：{menuffunctions.func（）}
);
}
}
Menu.js
和
style.js
不应该是
React.Component
并且您忘记调用
Func
方法，
（）
丢失

React.Component
只是一个UI组件，它包含一个返回
JSX
元素的呈现方法

您的代码应该如下所示：

index.js

import React from 'react';
import MenuFunctions from './Menu';
import MenuStyles from './styles'
import { Text, View } from 'react-native';

export default class MenuPage extends React.Component {
    render(){
        return(
            <View>
                <Text> Text: {MenuFunctions.func} </Text>
            </View>
        );
    }
}

import React from 'react';

export default class MenuFunctions extends React.Component{
    constructor(props){
        super(props);
    }

    func = () => {return "Hello, World!"};
}

import React from 'react';
import { StyleSheet } from 'react-native';

export default class MenuStyles extends React.Component{
    styles = StyleSheet.create({
        text: {
            color: "red",
        }
    });
}


从“React”导入React；
从“./菜单”导入菜单功能；
从“./样式”导入菜单样式；
从“react native”导入{Text，View}；
导出默认类MenuPage扩展React.Component{
render（）{
返回(
文本：{menuffunctions.func（）}
);
}
}
问题在于，当您必须指定文件本身时，您正试图使用“/Menu”

导入菜单函数从“/Menu”导入

Menu.js

。（记住使用括号调用函数

class.function（）

）

此外，无论何时导出为默认值，都不必使用大括号

{}

如果您想知道您的项目结构，您可以使用以下作为创建项目的通用结构。假设你有以下几点

 - index.js
 - src
   - assets
   - screens
     - MenuScreen
   - components
   - services
     - menu
       - index.js //this is Menu.js
 - android
 - ios

注意

---

如果您没有导出组件，请不要扩展

React.Component

。

问题是，当您必须指定文件本身时，您正试图使用

import menuffunctions from./Menu'

导入

Menu.js

。（记住使用括号调用函数

class.function（）

）

此外，无论何时导出为默认值，都不必使用大括号

{}

如果您想知道您的项目结构，您可以使用以下作为创建项目的通用结构。假设你有以下几点

 - index.js
 - src
   - assets
   - screens
     - MenuScreen
   - components
   - services
     - menu
       - index.js //this is Menu.js
 - android
 - ios

注意

---

如果不导出组件，请不要扩展

React.Component

。

您需要一个对象来执行所创建类的功能

然后声明并使用

构造函数

index.js

从“React”导入React；
从“./菜单”导入菜单功能；
从“./styles”导入菜单样式
从“react native”导入{Text，View}；
导出默认类MenuPage扩展React.Component{
建造师（道具）{
超级（道具）；
this.menu=新菜单函数（）
MemuStyle=新的MenuStyles（）
}
render（）{
返回(
文本：{this.menu.func（）}
);
}
}

Menu.js

从“React”导入React；
导出默认类菜单函数扩展React.Component{
func（）{
返回“你好，世界！”；
}
}

styles.js

从“react native”导入{StyleSheet}；
导出默认类MenuStyles扩展React.Component{
styles=样式表.create({
正文：{
颜色：“红色”，
}
});
}

注意：您打算使用的功能不一定要继承

React

---

您需要一个对象来执行您创建的类的功能

然后声明并使用

构造函数

index.js

从“React”导入React；
从“./菜单”导入菜单功能；
从“./styles”导入菜单样式
从“react native”导入{Text，View}；
导出默认类MenuPage扩展React.Component{
建造师（道具）{
超级（道具）；
this.menu=新菜单函数（）
MemuStyle=新的MenuStyles（）
}
render（）{
返回(
文本：{this.menu.func（）}
);
}
}

Menu.js

从“React”导入React；
导出默认类菜单函数扩展React.Component{
func（）{
返回“你好，世界！”；
}
}

styles.js

从“react native”导入{StyleSheet}；
导出默认类MenuStyles扩展React.Component{
styles=样式表.create({
正文：{
颜色：“红色”，
}
});
}

注意：您打算使用的功能不一定要继承

React

---

您不能直接访问该类的函数。使用的方法不正确。直接练习你的函数并找出问题所在。@如果你是对的，我已经解决了，但这里的主要问题是菜单