切换选项卡后反应本机重新渲染相机

Question

我有2个标签，一个用于主屏幕，一个用于qr代码。第一次当我按带有qr码的选项卡时，它将渲染照相机，但是当我切换到“主页”选项卡，然后再次按QR码选项卡时，它将不再渲染照相机。你能帮我吗？这是我的代码： 如果您有任何解决方法，请告诉我如何解决。 预先谢谢你。

import React from "react";
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
  Platform,
  Button,
  Linking
} from "react-native";
import MapView, { Marker, AnimatedRegion, Polyline } from "react-native-maps";
import { createBottomTabNavigator} from 'react-navigation';
import QRCodeScanner from 'react-native-qrcode-scanner';
import haversine from "haversine";
import markerImage1 from './src/green_mark.png';
import markerImage2 from './src/yellow_mark.png';
import markerImage3 from './src/red_mark.png';
const LATITUDE = 44.3262875;
const LONGITUDE = 23.8626129;
const LATITUDE_DELTA = 0.009;
const LONGITUDE_DELTA = 0.009;

class AnimatedMarkers extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: LATITUDE,
      longitude: LONGITUDE,
      markers: [],
      routeCoordinates: [],
      distanceTravelled: 0,
      prevLatLng: {},
      coordinate: new AnimatedRegion({
        latitude: LATITUDE,
        longitude: LONGITUDE
      })
    };
  }

  fetchMarkerData() {
    fetch('http://82.77.64.104:22670/json.php?auth=R4g6@iPn[,TyUN&location=Los%20Angeles')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          markers: responseJson.test,
        });
      })
      .catch((error) => {
        console.log(error);
      });
  }
  componentWillMount() {
    navigator.geolocation.getCurrentPosition(
      position => {},
      error => alert(error.message),
      {
        enableHighAccuracy: true,
        timeout: 20000,
        maximumAge: 1000
      }
    );
  }

  componentDidMount() {
    this.fetchMarkerData();
    const { coordinate } = this.state;
    this.watchID = navigator.geolocation.watchPosition(
      position => {
        const { coordinate, routeCoordinates, distanceTravelled } = this.state;
        const { latitude, longitude } = position.coords;

        const newCoordinate = {
          latitude,
          longitude
        };

        if (Platform.OS === "android") {
          if (this.marker) {
            this.marker._component.animateMarkerToCoordinate(
              newCoordinate,
              100
            );
          }
        } else {
          coordinate.timing(newCoordinate).start();
        }

        this.setState({
          latitude,
          longitude,
          routeCoordinates: routeCoordinates.concat([newCoordinate]),
          distanceTravelled:
            distanceTravelled + this.calcDistance(newCoordinate),
          prevLatLng: newCoordinate
        });
      },
      error => console.log(error),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000,distanceFilter: 1 }
    );
  }

  componentWillUnmount() {
    navigator.geolocation.clearWatch(this.watchID);
  }

  calcDistance = newLatLng => {
    const { prevLatLng } = this.state;
    return haversine(prevLatLng, newLatLng) || 0;
  };

  getMapRegion = () => ({
    latitude: this.state.latitude,
    longitude: this.state.longitude,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA
  });

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          showUserLocation
          followUserLocation
          loadingEnabled
          region={this.getMapRegion()}
        >
          <Polyline coordinates={this.state.routeCoordinates} strokeWidth={5} />
          <Marker.Animated
            ref={marker => {
              this.marker = marker;
            }}
            coordinate={this.state.coordinate} />

            {this.state.isLoading ? null : this.state.markers.map((marker, index) => {
     const coords = {
         latitude: marker.lat,
         longitude: marker.longi,
     };

     const metadata = `Stare : ${marker.status}`;

     if (marker.battery_lvl < 30)
{
nivel=markerImage3;
}
if (marker.battery_lvl > 30 && marker.battery_lvl < 70)
{
nivel=markerImage2;
}
if (marker.battery_lvl> 70)
{
nivel=markerImage1;
}

if (marker.battery_lvl)
     return (

         <MapView.Marker
         image={ nivel }
            key={index}
            coordinate={coords}
            title={`Unitatea ${marker.title}`}//{marker.stationName}
            description={metadata}



         />

      );

  })}
        </MapView>

        <View style={styles.buttonContainer}>
          <TouchableOpacity style={[styles.bubble, styles.button]}>
            <Text style={styles.bottomBarContent}>
              {parseFloat(this.state.distanceTravelled).toFixed(2)} km
            </Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}


class SettingsScreen extends React.Component {
  onSuccess(e) {
      alert(e.data)
    fetch(`http://82.77.64.104:22670/action.php?auth=R4g6@iPn[,TyUN&location=Los%20Angeles&status=1&scooter_id=${e.data}`); 

 }

 render() {
   return (
    <QRCodeScanner
       onRead={this.onSuccess.bind(this)}
       topContent={
         <Text style={styles.centerText}>
           <Text style={styles.textBold}>ETWOW ELECTRIC MOBILITY</Text>
         </Text>
       }
       bottomContent={
         <TouchableOpacity style={styles.buttonTouchable}>
           <Text style={styles.buttonText}>Torch</Text>
         </TouchableOpacity>
       }
     />
   );
 }
}
const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: "flex-end",
    alignItems: "center"
  },
  map: {
    ...StyleSheet.absoluteFillObject
  },
  bubble: {
    flex: 1,
    backgroundColor: "rgba(255,255,255,0.7)",
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20
  },
  bubble_ride: {
    flex: 1,
    backgroundColor: "rgba(255,255,255,3.7)",
    paddingHorizontal: 18,
    paddingVertical: 12,
    borderRadius: 20
  },
  latlng: {
    width: 200,
    alignItems: "stretch"
  },
  button: {
    width: 80,
    paddingHorizontal: 12,
    alignItems: "center",
    marginHorizontal: 10
  },
  button_ride: {
    width: 80,
    paddingHorizontal: 12,
    alignItems: "center",
    marginHorizontal: 10
  },
  buttonContainer: {
    flexDirection: "row",
    marginVertical: 20,
    backgroundColor: "transparent"
  }
});
export default createBottomTabNavigator(
  {
    Home: { screen: AnimatedMarkers },
    Scan_QR: { screen: SettingsScreen },
  } 

);