在 React Navigation 上更新 react-native-maps

Question

我正在使用 React Native 和 Expo 构建一个应用程序，使用 react native maps, and also react navigation V5 在屏幕之间导航。

当我更新状态时，我使用 setState，因为我使用的是 class，并且应用程序呈现，到目前为止一切顺利。

我在地图中使用位置，所以我必须等待获得用户位置的许可，方法是使用函数：componentDidMount()

前面的问题，现在当我更新 componentDidMount() 中的状态时，（这意味着，当定位完成时）它呈现在应用程序中，而不是屏幕中，但我的地图在初始屏幕中，并且它没有收到任何更新。

我是这样处理的：

    export default class App extends React.Component {
      constructor() {
        super()
        this.state = {
          initialPosition: {
            latitude: 0,
            longitude: 0,
            latitudeDelta: 0,
            longitudeDelta: 0,
          },      
          initialMarker: {
            latitude: 0,
            longitude: 0,
          }     
        }
      }
    
      
      componentDidMount(){
        this.getLocationAsync();    
      }
      
      
      getLocationAsync = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== 'granted') {
          this.setState({
            errorMessage: 'Permission to access location was denied',
          });
        }
    
        let location = await Location.getCurrentPositionAsync({accuracy:Location.Accuracy.BestForNavigation});
        const { latitude , longitude } = location.coords
        this.getGeocodeAsync({latitude, longitude})
       
       this.setState({ initialPosition: {
            latitude: latitude,
            longitude: longitude,
            latitudeDelta: 0,
            longitudeDelta: 0,
          }});    
          
          this.setState({ initialMarker: {
            latitude: latitude,
            longitude: longitude,
          }});
        
    
        console.log('GOT LOCATION')
    
      };

应用渲染部分：

render(){ 
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="HISTORIQUE" component={this.HomeScreen}/>
        <Drawer.Screen name="MOYENS DE PAYEMENT" component={this.NotificationsScreen} />
        <Drawer.Screen name="PARRAINAGE" component={this.NotificationsScreen} />
        <Drawer.Screen name="CONSTACTER PASS" component={this.NotificationsScreen} />
        <Drawer.Screen name="PARAMÈTRES" component={this.NotificationsScreen} />
        <Drawer.Screen name="DÉCONNEXION" component={this.NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
    
    );   
 }

我使用：this.state.initialPosition，在屏幕中，这在第一次加载时有效，但是当 componentDidMount() 完成并更新状态时，它不会在屏幕中更新。

用于地图的主屏幕：

HomeScreen =({ navigation}) => {

     return (
        <View style={styles.container}>
          <MapView
            style={styles.map}
            initialRegion={this.state.initialPosition}           
            region={this.state.initialPosition}>
                
                <Marker
                    coordinate={this.state.initialMarker}
                    title={"Your location"}
                >   

                </Marker>
        
            </MapView>
        </View>
    );
}

当前行为：标记和地图位置：为零，或在海洋中央。

通缉行为：标记和地图位置：在我当前位置。

我的问题是：位置数据完成后如何更新地图的位置？

另一种方式：如何在 componentDidMount() 函数完成后更新屏幕内的变量？

Answer 1

问题已解决！

使用 class 而不是函数：

class HomeScreen extends React.Component { ... }

而不是：

HomeScreen =({ navigation}) => {...}
将状态和 componentDidMount() 函数放在 HomeScreen 中 class。
将组件作为 class 而非函数调用：

<Drawer.Screen name="HOME" component={HomeScreen}/>
要使用导航对象：在 HomeScreen 的 render() 中设置它 class:

const { navigation } = this.props;

检查React Navigation docs

在 React Navigation 上更新 react-native-maps

Update react-native-maps on React Navigation

react-native

react-native-maps

react-navigation