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