我有一个应用程序,可以计算一个坐标到另一个坐标之间的行进距离和方位。我想onPress发生的是在按钮下方显示距离和方位。我已经尝试了一段时间,但无法弄清楚如何提供输出。我有可以导出到控制显示的app.js的计算类。
按计算后,唯一的输出是:Bearing: NaN
。
在输入框和按钮下面应该打印的内容是:
Distance: (distance)km
Bearing: (bearing)
任何指导将不胜感激。
Calculate.js
import React, { useState} from 'react';
import {StyleSheet, Text, View, TextInput} from 'react-native';
import {Button} from 'react-native-elements';
import {computeDistance, computeBearing} from './Calculations';
const Calculate = ({buttonTitle, lat1, lon1, lat2,lon2, distance, bearing}) => {
const [state, setState] = useState({lat1: '', lon1: '', lat2: '', lon2: '', distance: '', bearing: ''});
const updateStateObject = (vals) =>{
setState({
...state,
...vals,
});
};
return (
<View style={styles.container}>
<TextInput
placeholder = 'Starting latitude'
onChangeText = {(lat1) => updateStateObject({lat1: lat1})} //or you could do (val) => {setName(val);}
value = {state.lat1}/>
<TextInput
placeholder = 'Starting longitude'
onChangeText = {(lon1) => updateStateObject({lon1: lon1})} //or you could do (val) => {setName(val);}
value = {state.lon1}/>
<TextInput
placeholder = 'Ending latitude'
onChangeText = {(lat2) => updateStateObject({lat2: lat2})} //or you could do (val) => {setName(val);}
value = {state.lat2}/>
<TextInput
placeholder = 'Ending longitude'
onChangeText = {(lon2) => updateStateObject({lon2: lon2})} //or you could do (val) => {setName(val);}
value = {state.lon2}/>
<Button
title= {buttonTitle}
onPress = {() =>{
distance = computeDistance({lat1: lat1}, {lon1: lon1}, {lat2: lat2}, {lon2: lon2});
bearing = computeBearing({lat1: lat1}, {lon1: lon1}, {lat2: lat2}, {lon2: lon2})
updateStateObject({distance: `Distance: ${distance}`});
updateStateObject({bearing: `Bearing: ${bearing}`});
}} />
<Text> {state.distance}</Text>
<Text> {state.bearing}</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default Calculate;
App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Calculate from './components/Calculate';
//import Clear from './components/Clear';
//need to put clear underneath Calculate
export default function App() {
return (
<View style={styles.container}>
<Text> 'Please enter your coordinates you wish to calculate.' </Text>
<Calculate buttonTitle = 'Calculate' bearing = '' distance = ''/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Calculations.js
// Converts from degrees to radians.
function toRadians(degrees) {
return (degrees * Math.PI) / 180;
}
// Converts from radians to degrees.
function toDegrees(radians) {
return (radians * 180) / Math.PI;
}
// Computes distance between two geo coordinates in kilometers.
export function computeDistance(lat1, lon1, lat2, lon2) {
console.log(`p1={${lat1},${lon1}} p2={${lat2},${lon2}}`);
var R = 6371; // km (change this constant to get miles)
var dLat = ((lat2 - lat1) * Math.PI) / 180;
var dLon = ((lon2 - lon1) * Math.PI) / 180;
var a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos((lat1 * Math.PI) / 180) *
Math.cos((lat2 * Math.PI) / 180) *
Math.sin(dLon / 2) *
Math.sin(dLon / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c;
return `${round(d, 3)} km`;
}
// Computes bearing between two geo coordinates in degrees.
export function computeBearing(startLat, startLng, destLat, destLng) {
startLat = toRadians(startLat);
startLng = toRadians(startLng);
destLat = toRadians(destLat);
destLng = toRadians(destLng);
var y = Math.sin(destLng - startLng) * Math.cos(destLat);
var x =
Math.cos(startLat) * Math.sin(destLat) -
Math.sin(startLat) * Math.cos(destLat) * Math.cos(destLng - startLng);
var brng = Math.atan2(y, x);
brng = toDegrees(brng);
return (brng + 360) % 360;
}
function round(value, decimals) {
return Number(Math.round(value + "e" + decimals) + "e-" + decimals);
}
编辑:更新了Calculate.js并添加了Calculations.js
尽管相同的问题仍然存在。
我认为在Calculate
组件中,您正在将对象传递到函数中但是在Calculations.js
中,您的函数期望的变量是简单值而不是对象。另一件事是,您以对象形式传递的值是作为props
获得的值,而不是您在state
中设置的值,您应该使用state.lat1等。>