React-native-maps在每次状态更改时重新呈现

pqwbnv8z 于 2023-01-09 发布在 React

关注(0)|答案(1)|浏览(131)

我在一个react-native项目中使用了react-native-maps，我展示了一个如下所示的Map：

<MapView
  camera={{
    center: {
      latitude: location.lat,
      longitude: location.lng
    },
    altitude: 500,
    zoom: 12
  }}
  style={{ width: '100%', height: '100%' }}
/>

我在这个map下面有一个TextInput组件，我使用useState()-hook来跟踪TextInput组件的值。
问题是每次通过TextInput-component更新状态时，Map都会重新呈现，我尝试将其 Package 在React.memo()-函数中，但每次它仍然会重新呈现。
Map中的location-props来自一个自定义的useLocation-hook，我使用react-native-geolocation来获取用户的当前位置，以便在Map上显示。

react-native

来源：https://stackoverflow.com/questions/75040396/react-native-maps-rerenders-every-time-state-changes

1条答案

按热度按时间

yhuiod9q1#

尝试像这样提取样式和相机：

import React, {useMemo} from "react";
import { StyleSheet } from "react-native";

const styles = StyleSheet.create({
  map: { width: '100%', height: '100%' }
})

const Component = () => {
  const camera = useMemo(() => ({
    center: {
      latitude: location.lat,
      longitude: location.lng
    },
    altitude: 500,
    zoom: 12
  }), [location.lat, location.lng])

  return (
    <MapView
      camera={camera}
      style={styles.map}
    />
  )
}

赞(0）回复(0）举报 2023-01-09

我来回答

React-native-maps在每次状态更改时重新呈现

1条答案

相关问题

热门标签

最新问答