Question

所以我试图在代码底部将此部分添加到我的视图中...

数据来自控制台，但我需要它显示并能够被操纵成英里

我一直在尝试不同的东西，但无法让它发挥作用..

我对这个东西很陌生..

//JavaScript here

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
HTML HERE


    console.log(`Distance: ${result.distance} km`);
       
    console.log(`Duration: ${result.duration} min.`)

    
      return (
        <View>
          <MapView
            style={{height: '70%', width: '100%'}}
            initialRegion={{
              latitude: 39.12690965849537,
              longitude: -77.548617094021614,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}>
            <MapViewDirections
              origin={originLoc}
              destination={destinationLoc}
              apikey={GOOGLE_MAPS_APIKEY}
              strokeWidth={5}
              strokeColor="orange"
              onReady={result => {
                //MapData.distance = result.distance;
                //MapData.duration = result.duration;
                console.log(`Distance: ${result.distance} km`);
                console.log(`Duration: ${result.duration} min.`);
              }}
            />
    
            <Marker coordinate={originLoc} title={'Origin'} />
            <Marker
              coordinate={destinationLoc}
              title={'Destination'}
              pinColor={'orange'}
            />
          </MapView>
    
          <View>
            <Text>I am Iron Man!!!</Text>
            <Text>
              distance : {MapData.distance} km.time : {MapData.duration} min
            </Text>
          </View>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        alignItems: 'center',
      },
    });

Answer 1

尝试使用 UseState 钩子。

 import React, { useState } from 'react';
 const [distance, setdistance] = useState(0);   
 const [duration, setduration] = useState(0);

 return (
    <View>
      <MapView
        style={{height: '70%', width: '100%'}}
        initialRegion={{
          latitude: 39.12690965849537,
          longitude: -77.548617094021614,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}>
        <MapViewDirections
          origin={originLoc}
          destination={destinationLoc}
          apikey={GOOGLE_MAPS_APIKEY}
          strokeWidth={5}
          strokeColor="orange"
          onReady={result => {
            setdistance(`${result.distance}`);
            setduration(`${result.duration}`);
            console.log(`Distance: ${result.distance} km`);
            console.log(`Duration: ${result.duration} min.`);
          }}
        />
    <Marker coordinate={originLoc} title={'Origin'} />
        <Marker
          coordinate={destinationLoc}
          title={'Destination'}
          pinColor={'orange'}
        />
      </MapView>

      <View>
        <Text>I am Iron Man!!!</Text>
        <Text>
           { distance }
           {' '}
           KM.time 
           :
           { Math.trunc(duration) || '0'}
           {' '}
           Min
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
  },
});

将数据传递给我猜的组件

1 个答案: