USAGE

/** 书籍位置信息 */
const location = {
  "clc": {
    "area": "智图办公区",
    "class": "小智书架",
    "shelf": 1,
    "direct": "B",
    "column": 2,
    "layer": 2,
    "deviceId": "1238aaa904a11c8",
    "layerId": 20
  }
};
export default function App() {
  let mapNativeRef = useRef<MapNativeRef | null>(null).current;
  const [mapConfig, setMapConfig] = useState<any>();
  const [direction, setDirection] = useState<directionProps>('side');
  /** 获取地图配置 */
  async function _getMapConfig() {
    const data = await getMapConfig();
    if (data.status === 200) {
      setMapConfig(data.results);
    }
  }
  /** 初始化 */
  useEffect(() => {
    _getMapConfig();
  }, [])
  return <View style={style.main}>
    {mapConfig && (
      <MapNative
        ref={(ref) => { mapNativeRef = ref }}
        width={800}
        height={500}
        mapConfig={mapConfig}
        borderRadius={20}
        location={location.clc}
        shelfInfo={{ shelfNum: 2 } || 2}
        showTips={true}
        background={`red`}
        onChange={(e)=>{console.log(e.direction)}}
      />
    )}
    <TouchableOpacity
      onPress={() => mapNativeRef?.toSwitch(setDirection)}
      style={style.button}
    >
      <Text style={style.button_text}>
        切换地图{direction === 'side' ? '正面' : '侧面'}
      </Text>
    </TouchableOpacity>
  </View>
}

const style = StyleSheet.create({
  main: {
    width: Dimensions.get('screen').width,
    height: Dimensions.get('screen').height,
    backgroundColor: `#CCCCCC`,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center'
  },
  button: {
    marginTop: 50,
    width: `50%`,
    height: 70,
    backgroundColor: '#1890ff',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 20
  },
  button_text: {
    fontSize: 30,
    color: `#FFFFFF`
  }
})

• VERSION

  • 1.1.9

    • 优化地图尺寸自动适配
    • 优化地图文字标注文字自动适配

  • 1.1.8

    • 优化只有正面图时，禁用ref切换

  • 1.1.7

    • 更新当没有侧面视图时，直接使用正面视图