在React-Native中将值从一个文件导入到另一个文件

Question

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

我想知道我是否使用导入错误。 import { MenuFunctions} from './Menu'使用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",
        }
    });
}

Answer 1

Menu.js和styles.js不应为React.Component并且您忘记了调用Func方法，缺少() 。

React.Component是一个UI组件，仅包含返回JSX元素的render方法。

您的代码应如下所示：

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

Answer 2

问题在于，当您必须指定文件本身： './Menu/Menu.js' import MenuFunctions from './Menu'时，您正在尝试使用import MenuFunctions from './Menu' import Menu.js import MenuFunctions from './Menu' （请记住使用括号class.function()调用该函数）

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

如果您对项目结构有所疑问，可以将以下内容用作创建项目的通用结构。 假设您有以下情况

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

注意

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

Answer 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 。