亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Native Map View 初始渲染

React Native Map View 初始渲染

慕森王 2021-11-04 15:20:43
我正在通過以下屏幕為單個帖子加載帶有標記的地圖。下面的這段代碼很完美,它在地圖上顯示標記,并且地圖視圖圓圈也出現在與標記相同的位置。問題:我想將 initialRegion 設置為標記坐標,以便地圖位于標記所在的正確位置。我試過用posts.lat 和posts.lng 設置initialRegion 緯度和經度,就像我對mapview 圓所做的那樣,但這不適用于初始區域。只有一個標記從 API 加載,因為這是一個單獨的帖子屏幕componentDidMount() {    this.getPosts();  }  getPosts() {    axios      .get('myAPI')      .then(response => {        this.setState({          post: response.data,          loading: false        });      });}render() {const posts = (this.state ?? this.state.posts) ? this.state.posts :     return (      <MapView style={styles.map}              initialRegion={{                  latitude: 43.660192,                  longitude: -79.425250,                  latitudeDelta: 0.04,                  longitudeDelta: 0.05,              }}            ><MapView.Marker key={posts.id} coordinate={{latitude: posts.lat, longitude: posts.lng}} /><MapView.Circle            center={{              latitude: posts.lat,              longitude: posts.lng,            }}            radius={150}            strokeWidth={2}            strokeColor="#3399ff"            fillColor="rgba(102,204,153,0.2)" />          </MapView>);  }
查看完整描述

2 回答

?
白豬掌柜的

TA貢獻1893條經驗 獲得超10個贊

問題是,目前,您的地圖將在您為 pin 坐標發出 API 請求之前呈現。如果這是使用 react-native-maps,他們的文檔指出在初始渲染后更改 initialRegion 不會導致地圖更改:


在組件安裝后更改 [the initialRegion] 屬性不會導致區域更改。 https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md


您需要:


等到您有 API 響應來渲染地圖,或者

使用初始區域的估計值渲染地圖,并在 API 調用完成且狀態更新后更新地圖位置。

選項1:


if (this.state.loading) {

  // Better loading logic here

  return <Text>Loading...</Text>

}


return (

  <MapView 

    style={styles.map}

    initialRegion={{

      latitude: posts.lat,

      longitude: posts.lng,

      latitudeDelta: 0.04,

      longitudeDelta: 0.05,

    }}

  >

  </MapView>

);

第二種選擇:


// You need to add region to state.

getPosts() {

    axios

      .get('myAPI')

      .then(response => {

        this.setState({

          post: response.data,

          region: {

            latitude: response.data.lat,

            longitude: response.data.long,

            latitudeDelta: 0.04,

            longitudeDelta: 0.05,

          }

          loading: false

        });

      });

}


render() {

  return (

    <MapView 

      style={styles.map}

      initialRegion={{

        latitude: posts.lat,

        longitude: posts.lng,

        latitudeDelta: 0.04,

        longitudeDelta: 0.05,

      }}

      region={this.state.region}

    >

      ...

    </MapView>

  );

}

加分項:如果您使用animateToRegion. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md#methods


希望這可以幫助!


查看完整回答
反對 回復 2021-11-04
?
aluckdog

TA貢獻1847條經驗 獲得超7個贊

我以前遇到過這個問題,我像這樣修復了它們。

首先,您應該在導航到地圖視圖之前獲取遠程數據。
并且您應該使用道具或導航參數將 latlng 數據發送到 MapView。

其次,您應該initialRegion通過傳遞的數據進行設置。


查看完整回答
反對 回復 2021-11-04
  • 2 回答
  • 0 關注
  • 230 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號