React Native：在componentWillMount中導入一個組件

Question

我需要調用componentWillMount中的一個函數，但我不希望它位於同一個文件中。

有沒有辦法引用componentWillMount中的函數？

下面是代碼，我已經離開了很多，因爲我在重構中間我這是不相關的解決這個問題的代碼（因此這個問題！）：

Midpoint.js：

import React, { Component } from 'react'; 

class Midpoint extends Component { 

    midpoint(lat1, lng1, lat2, lng2) { 
    const rad = (Math.PI)/180; 
    const rlat1 = lat1 * rad; 
    const rlng1 = lng1 * rad; 
    const rlat2 = lat2 * rad; 
    const rlng2 = lng2 * rad; 

    const dlng = rlng2 - rlng1; 
    const Bx = Math.cos(rlat2) * Math.cos(dlng); 
    const By = Math.cos(rlat2) * Math.sin(dlng); 

    const lat3 = Math.atan2(Math.sin(rlat1) + Math.sin(rlat2), 
       Math.sqrt(((Math.cos(rlat1) + Bx) * (Math.cos(rlat1) + Bx)) + (By * By))); 
    const lng3 = rlng1 + Math.atan2(By, (Math.cos(rlat1) + Bx)); 

    const lat = (lat3 * 180)/Math.PI; 
    const lng = (lng3 * 180)/Math.PI; 
    this.setState({ lat2: lat, lng2: lng }); 
    } 
} 

export default Midpoint; 

這是我想導入到下面的功能：

ResultsPage.js：

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import getDirections from 'react-native-google-maps-directions'; 
import axios from 'axios'; 
import Midpoint from './Midpoint'; 
import { Card, CardSection, Button } from './common'; 

class ResultsPage extends Component { 
    state = {} 

    componentWillMount() { 
.then(response => { Midpoint.midpoint(this.state.p1Latitude, this.state.p1Longitude, this.state.p2Latitude, this.state.p2Longitude) }) 

} 

我收到的錯誤是_Midpoint2.default.midpoint is not a function

Answer 1

您試圖調用組件喜歡它是一個功能，如果中點的唯一目標是計算位置的經緯度，然後不`噸使它成爲一個陣營組件只導出功能

export default function calculateMidpoint(lat1, lng1, lat2, lng2) { 
    const rad = (Math.PI)/180; 
    const rlat1 = lat1 * rad; 
    const rlng1 = lng1 * rad; 
    const rlat2 = lat2 * rad; 
    const rlng2 = lng2 * rad; 

    const dlng = rlng2 - rlng1; 
    const Bx = Math.cos(rlat2) * Math.cos(dlng); 
    const By = Math.cos(rlat2) * Math.sin(dlng); 

    const lat3 = Math.atan2(Math.sin(rlat1) + Math.sin(rlat2), 
       Math.sqrt(((Math.cos(rlat1) + Bx) * (Math.cos(rlat1) + Bx)) + (By * By))); 
    const lng3 = rlng1 + Math.atan2(By, (Math.cos(rlat1) + Bx)); 

    const lat = (lat3 * 180)/Math.PI; 
    const lng = (lng3 * 180)/Math.PI; 
    return { lat, lng } 
    } 

但如果中點必須是一個組件剛剛提取的邏輯就像我們在過去的例子一樣，把它放在一個diferent文件，並調用它的結果和中點組件

比方說您把在Utils.js中的同一個目錄中的函數

個

ResultsPage.js

import React, { Component } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import getDirections from 'react-native-google-maps-directions'; 
import axios from 'axios'; 
import calculateMidpoint from './Utils'; 
import { Card, CardSection, Button } from './common'; 

class ResultsPage extends Component { 
    state = {} 

    componentWillMount() { 
let latlng = calculateMidpoint(this.state.p1Latitude, this.state.p1Longitude, this.state.p2Latitude, this.state.p2Longitude) 

} 

和Midpoint.js

import React, { Component } from 'react'; 
import calculateMidpoint from './Utils'; 
class Midpoint extends Component { 

    midpoint(lat1, lng1, lat2, lng2) { 
    let latlng = calculateMidpoint(lat1, lng1, lat2, lng2) 
    this.setState({ lat2: latlng.lat, lng2: latlng,lng }); 
    } 
} 

export default Midpoint; 

也，你有componentWillMount錯誤你在哪裏調用。那麼（）無處