在 react-native 中将值从一个文件导入另一个文件的问题答案

【问题标题】：Issue importing values from one file to another in react-native在 react-native 中将值从一个文件导入另一个文件的问题
【发布时间】：2019-08-12 14:44:19
【问题描述】：

我正在学习 ReactNative，现在我正在研究如何组织文件（现在我将为每个页面创建一个文件夹，每个页面都有一个索引、函数和样式文件）。但是由于某种原因，我无法将信息导入index.js，无法使用样式或功能，当我打开页面时，它不会返回func方法。

我想知道我是否使用了错误的导入。使用import { MenuFunctions} from './Menu' 导致错误提示未导入任何内容，此错误不再出现，但仍然没有返回任何内容。

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

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

Menu.js

import React from 'react';

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

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

styles.js

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

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

【问题讨论】：

标签： javascript react-native import

【解决方案1】：

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

Menu.js

import React from 'react';

class MenuFunctions {
  func = () => {
    return 'Hello, World!';
  };
}

export default new MenuFunctions();

styles.js

import {StyleSheet} from 'react-native';

export default styles = StyleSheet.create({
  text: {
    color: Colors.red30,
  }
});

【讨论】：

不能直接访问类的功能。而且使用的方法不对。
直接练习你的函数，找到问题。
@hongdevelop 你是对的，我解决了这个问题，但这里的主要问题是 MenuFunctions 和 MenuStyles 从 React.Component 扩展而来。

【解决方案2】：

问题是您尝试使用import MenuFunctions from './Menu' 导入Menu.js，而您必须指定文件本身：'./Menu/Menu.js'。（记得用括号class.function()调用函数）

此外，每当您导出为默认时，您不必使用花括号 {}

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

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

注意

如果您不导出组件，请不要扩展 React.Component。

【讨论】：

【解决方案3】：

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

然后声明并使用constructor。

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 {
  constructor(props){
    super(props);
    this.menu = new MenuFunctions()
    MemuStyle = new MenuStyles()
  }


    render(){
        return(
            <View>
                <Text style={MemuStyle.styles.text}> Text: {this.menu.func()}</Text>
            </View>
        );
    }
}

Menu.js

import React from 'react';

export default class MenuFunctions extends React.Component {

  func(){
    return 'Hello, World!';
  }
}

styles.js


import { StyleSheet } from 'react-native';

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

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

【讨论】：