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错误你在哪里调用。那么（）无处