React Native Map在componentDidMount中呈现两次

Question

我正在构建一个应该呈现的React Native应用程序 使用react-native-maps的当前位置的mapview。

Mapview可以工作，但渲染两次，一次没有位置，一次有正确的位置。

位置状态在componentWillMount更新，并将状态更新为对Location.watchPositionAsync的调用结果。

在render方法中，Expo.Mapview位置基于作为this.state.location值的区域进行渲染。

初始渲染错误

正确渲染

以下是我的组件的代码。

const GEOLOCATION_OPTIONS = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 1000
};


export default class HomeScreen extends React.Component {
constructor() {
super();
this.state = {
  location: { latitude: null, longitude: null, latitudeDelta: 0.0922, 
longitudeDelta: 0.0421 },
  mounted: false,
    };
}

componentWillMount() {
// checks the location when components mounts and set state to the result
Location.watchPositionAsync(GEOLOCATION_OPTIONS, this.locationChanged);
}

locationChanged = location => {

(location = {
  latitude: location.coords.latitude,
  longitude: location.coords.longitude,
  latitudeDelta: 0.0922,
  longitudeDelta: 0.0421
}),
  this.setState({ location, location });
};

static navigationOptions = {
    header: null
};


componentDidMount() {
    console.log(this.state.mounted);
    this.state.mounted = true;
}



render() {
 return (
  <ScrollView style={styles.container}>
    <Header headerText="Company Name" />

    <View>

          {this.state.mounted ?

            (

              <Expo.MapView

                style={styles.MapView}
                showsUserLocation={true}
                region={this.state.location}
                //initialRegion={this.state.location}


                // for use with custom map
                customMapStyle={ultralight}
                provider={PROVIDER_GOOGLE}
              >

                {biodata.map(marker => (

                  <Expo.MapView.Marker
                    key={marker.Title}
                    coordinate={{
                      longitude: parseFloat(marker.Longitude),
                      latitude: parseFloat(marker.Latitude)
                    }}
                    image={require('../assets/images/pin.png')}
                    title={marker.Title}
                    description={marker.Description}
                  >


                  <Expo.MapView.Callout onPress={() => this.props.navigation.navigate('Station', { station: marker, location: this.state.location})}>
                    <View>

                      <Text>{marker.Title}</Text>
                      <Text>{marker.Description}</Text>
                    </View>
                  </Expo.MapView.Callout>
                </Expo.MapView.Marker>
                ))}
              </Expo.MapView>

            )

            : <Spinner />

          }
    </View>
  </ScrollView>
);
}

}

*编辑

我让它在添加单行

this.refs.map.animateToRegion(location, 2000)

在locationChanged方法内。这将使用2秒动画从屏幕上从GPS位置拍摄的区域进行动画制作。

感谢您的帮助。