.map react-native

2017-06-16 12:33:43 sinat_37059404 阅读数 7090
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

转载请注明地址:http://blog.csdn.net/sinat_37059404/article/details/73330041

github官网地址:
https://github.com/lovebing/react-native-baidu-map

下载方式:

npm install react-native-baidu-map --save

插件使用过程中需要配置的内容:
1,在项目的 android/settings.gradle目录 下添加:

include ':app'
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

2, 在android/app/build.gradle 中添加:

dependencies {
  compile project(':react-native-baidu-map') // 添加的一行
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+" // From node_modules
}

3, 在android/app/src/main/AndroidManifest.xml 中添加:
这个地方需要修改两个地方,
一个是修改权限,权限问题就是你需要获取百度的网络定位能;
一个是添加 meta-data,这个就是百度开发的key了,可以从百度里面直接找到具体申请方法,按照步骤做就可以了

<!-- 这个权限用于进行网络定位-->
  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
  <!-- 这个权限用于访问GPS定位-->
  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
  <uses-permission android:name="android.permission.WAKE_LOCK"/>
  <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_SETTINGS" />

<application
  ...
  <meta-data
  android:name="com.baidu.lbsapi.API_KEY"
  android:value="I03Xwhn5L3uVBrYSRfG8KzSrSZQkaM8h"/> // 申请到的baidu地图app key ,这个是主要添加的标签,之后再说如何获取百度的key

  ...
  </application>

4, 在android/app/src/main/Java/[…]/MainApplication.java 中添加:

import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加

  @Override
  protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
  new MainReactPackage(),                    //注意这个地方的逗号
  new BaiduMapPackage(getApplicationContext()) // 添加
  );
  }

5, index.android.js 添加功能实现(导入相关功能组件):也可以在你需要引入地图的界面修改;BaiduMapDemo组件是官网上的demo,需要复制下载在你的项目中做成一个你的组件来用,直接引入是找不到这个的;

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import BaiduMapDemo from './BaiduMapDemo' //需在index.android.js同级目录下添加BaiduMapDemo.js文档

export default class BaiDuMapDemo extends Component {
  render() {
    return (
      <BaiduMapDemo/>
    );
  }
}

AppRegistry.registerComponent('myrnbaidumap', () => BaiDuMapDemo);

6,然后在运行就可以了
申请百度的key可以参考:
http://lbsyun.baidu.com/index.php?title=androidsdk/guide/key

使用的话可以根据官网的哪个demo改一些就可以用了

2019-05-16 15:31:49 qq_41933225 阅读数 305
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

在学习过程中使用react-native编写android端的app,其中使用了高德地图组件的一个第三方库react-native-amap3d,编写过程中在虚拟机上运行地图模块都显示正常。当我整个程序编写完成并将将程序打包为release版本的apk后,安装在手机上运行程序,程序其他地方都正常,但只要打开显示地图模块的页面就会直接导致app闪退。

后来发现,我在打包时选择了启用Proguard代码混淆来缩小APK文件的大小这个功能

关闭这个功能后打包apk,安装在手机上就可以正常运行react-native-amap3d地图组件了

即def enableProguardInRelBuilds = false

2018-01-09 14:03:20 liyh0804 阅读数 3579
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看
React-Native 与Iconfont整合

1、从阿里妈妈上选择自己所需要的素材,下载源代码
http://www.iconfont.cn/
下载后得到的iconfont.ttf iconfont.svg.js即为所需文件

两种解决方案: react-native-vector-icons && react-native-svg

采用 react-native-svg解决方案:
(1)下载依赖包 react-native-svg
yarn add react-native-svg
执行link操作
react-native link react-native-svg
(2)在android/settings.gradle文件追加如下几行:
include ':react-native-svg'
project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
(3)在android/app/build.gradle中插入依赖模块
compile project(':react-native-svg')
(4)在 android/app/src/main/java/[...]/MainApplication.java中插入如下操作
添加 import com.horcrux.svg.SvgPackage;
在getPackages()方法的返回值中添加 new SvgPackage()

注意> 编译react-native-svg出现的问题
error: resource android:style/TextAppearance.Material.Widget.Button.Borderless.Colored not found.
error: resource android:style/TextAppearance.Material.Widget.Button.Colored not found.
error: failed linking references.
是因为svg编译打包使用的是高版本的原因,需要修改自己项目app:build.gradle做对应的升级处理

下载图标方式
(1)从阿里妈妈上下载自己需要的各种图标,iconfont.svg即为所需
(2)自己编写脚本,生成指定格式的图标文件iconfont.svg.js
(脚本暂时没有进行开发,基本确定采用python/shell/perl脚本进行开发)
(3)自己手动的添加图标的填充颜色(颜色是统一定制化开发的,在其中填充fill)
(4)自己封装IconSvg组件
import React, { Component } from 'react'
import Svg, { Path } from 'react-native-svg'
import Icons from '[...]/iconfont.svg.js'

const ICON_SIZE = { xxs: 15, xs: 18, sm: 21, md: 22, lg: 36 }

export default SvgIcon extends Component {
render() {
const { type, fill, width, height, size, style } = this.props
return (
<Svg
width={width || ICON_SIZE[size] || 22}
height={height || ICON_SIZE[size] || 22}
viewBox={Icons.viewBox[type] || '0 0 1024 1024'}
style={{
...style,
}}
>
{
Icons[type] && Icons[type].map((path, index) => {
let default_fill = path.fill
default_fill = fill ? fill : default_fill
return <Path key={index} d={path.d} fill={default_fill} />
})
}
</Svg>
)
}

}

(5)使用
<SvgIcon type='ac_unit' size='40' width='22' height='22' fill='#ccc' />
2020-03-12 16:39:44 qq_33466661 阅读数 204
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

react-native-amap3d 是 react-native 高德地图组件,使用最新 3D SDK,支持 Android + iOS

参考github:https://github.com/qiuxiang/react-native-amap3d


1.功能

该组件提供的功能可以满足一般的react-native开发需求

  • 地图模式切换(常规、卫星、导航、夜间)
  • 3D 建筑、路况、室内地图
  • 内置地图控件的显示隐藏(指南针、比例尺、定位按钮、缩放按钮)
  • 手势交互控制(平移、缩放、旋转、倾斜)
  • 中心坐标、缩放级别、倾斜度的设置,支持动画过渡
  • 地图事件(onPress、onLongPress、onLocation、onStatusChange)
  • 地图标记(Marker)
  • 自定义信息窗体
  • 自定义图标
  • 折线绘制(Polyline)
  • 多边形绘制(Polygon)
  • 圆形绘制(Circle)
  • 热力图(HeatMap)
  • 海量点(MultiPoint)
  • 离线地图

2. 安装

npm i react-native-amap3d

#ios项目需要更新pods
cd ios
pop install

本项目从 v2.0.0 开始支持 RN 的 autolinking,不再需要手动配置

添加高德Key

Android

  1. 获取高德Key
  2. 编辑 Android 项目的 AndroidManifest.xml(一般在android\app\src\main\AndroidManifest.xml),添加如下代码:
<application>
  <meta-data
    android:name="com.amap.api.v2.apikey"
    android:value="你的高德 Key" />
</application>

ios

  1. 获取高德Key
  2. 在AppDelegate.m 里引入SDK头文件 #import <AMapFoundationKit/AMapFoundationKit.h> ,并设置高德Key [AMapServices sharedServices].apiKey = @"你的高德 Key";

3. 使用

导入地图模块

import {MapView} from "react-native-amap3d";
class MapPage extends Component {
	render() {
	return(
	//MapView 还支持onClick ,onLongClick,onLocation 事件
	<MapView
  	coordinate={{latitude: 39.91095,longitude: 116.37296}}
  	locationEnabled={false} //是否启用定位 boolean
  	mapType={"standard"} //五种可选 standard,bus,navigation,night,satellite
  	rotateEnabled={true} //是否启用旋转手势,用于调整方向
  	scrollEnabled={true} //是否启用滑动手势,用于平移
  	showsCampass={false} //是否显示指南针
  	showsLocationButton={true} //是否显示定位按钮 (该功能只支持android)
	> 
	
	//地图上的标记点
	<Marker 
	active={true} //是否选中,选中时将显示信息窗体,一个地图只能有一个正在选中的 marker
	clickDisabled={false} //是否禁用点击,默认不禁用
	coordinate={{
	latitude:39.91095,
	longitude:116.37296
	}}
	title={"目标点"}
	/>
	
	//画多边形
	<Polygon
	coordinates = {[  //顶点坐标 参数为数组
	{
      latitude: 40.006901,
      longitude: 116.097972,
    },
    {
       latitude: 40.006901,
       longitude: 116.597972,
     },
     {
        latitude: 39.706901,
        longitude: 116.597972,
     }
	]}
	fillColor={"rgba(97,217,242,0.1)"} //多边形填充颜色
	strokeColor = {"rgba(97,217,242,1)"} //边线颜色
	strokeWidth = {4} //边线宽度
	/>

	//画多段线
	<Polyline
		coordinates={[
		{
      	latitude: 40.006901,
      	longitude: 116.097972,
    	},
    	{
       latitude: 40.006901,
       longitude: 116.597972,
     	},
     	{
        latitude: 39.706901,
        longitude: 116.597972,
     	}
		]}
		color={"rgba(97,217,242,1)"} //线段颜色
		dashed={false} //是否绘制虚线
		width={4}
	/>
	</MapView>
	

	
	)
	}
}

export default MapPage;

Marker自定义样式

<Marker 
	active={true}
	clickDisabled={false}
	coordinate={{
	latitude:39.91095,
	longitude:116.37296
	}}
	icon={() => <Image source={require('../Point.png')} style={{width:15,height:20}}/>}
	title={"自定义样式点"}
	/>

4. 坑点

可能会遇到的坑
1、react-native-amap3d MapView不显示
2、自定义 Marker 有可能会出现闪退的情况,github上作者建议不使用自定义Marker

2019-02-28 17:58:46 zz_chst 阅读数 1366
  • 1.JHipster简介

    学习和掌握U-Net图像语义分割技术来训练自己的数据集 学习U-Net语义分割原理 学习使用labelme图像标注 学习Kaggle参数流程

    438人学习 刘宏强
    免费试看

最近,在用RN开发手机App遇到这样一个传统的需求,语言切换,小白第一次接触,如何见解,敬请指教!

1.安装react-native-i18n依赖库,npm/cnpm/yarn在这里就不说啦,就那么回事儿

2.项目中使用

首先,建立如下语言切换的文件(英文版本的静态属性en.js,中文版本的静态属性zh-Hans.js,语言配置文件Language.js)

en.js 代码如下:

export default {
  'Message': 'Message',
  'Message detail': 'Message detail',
  'Me': 'Me',
  'Personal Information': 'Personal Information',
  'Settings': 'Settings'
}

zh-Han.js 代码如下:

export default {
  'Message': '消息',
  'Message detail': '消息详情',
  'Me': '我',
  'Personal Information': '个人信息',
  'Settings': '设置'
}

Language.js 代码如下:

import I18n from 'react-native-i18n';
import en from './locales/en';
import zhHans from './locales/zh-Hans';

I18n.fallbacks = true;

I18n.translations = {
  en,
  zhHans
};

export default I18n;

静态属性OK啦,那么接下来就是使用啦,这里用的是EventBus(react-native-event-bus),AsyncStorage等,直接上代码:

import React, { Component } from 'react';
import { View, TouchableOpacity, Text, Image, StyleSheet, AsyncStorage } from 'react-native';
import EventBus from 'react-native-event-bus';
import HeadNavigation from '../../component/common/HeadNavigation';
import Language from '../../language/Language';

export default class LanguageSetting extends Component {
  constructor(props) {
    super(props);
    this.state = {
      language: 'zhHans'
    }
    this.renderLanguageItem = this.renderLanguageItem.bind(this)
  }

  componentDidMount() {
    AsyncStorage.getItem('language', (error, result) => {
      if (!error && result) {
        this.setState({ language: result })
      }
    })
  }

  renderLanguageItem(item, index) {
    return (
      <TouchableOpacity
        key={index}
        style={styles.items}
        onPress={() => {
          AsyncStorage.setItem('language', index)
          Language.locale = index
          EventBus.getInstance().fireEvent(Event.LANGUAGE_REFRESH)
          this.setState({
            language: index
          })
        }}
      >
        <View style={[{borderBottomWidth: index === 'en' ? 0 : 1}, styles.content]}>
          <View style={styles.textWrapper}>
            <Text style={styles.text}>{ item }</Text>
          </View>
          {
            this.state.language === index ?
              <Image
                style={styles.image}
                source={ require('../../resources/images/common/check.png') }
              /> : null
          }
        </View>
      </TouchableOpacity>
    )
  }

  render() {
    const languages = {
      'zhHans': '简体中文',
      'en': 'English',
    };
    let languageItems = []
    Object.keys(languages).map((key) => {
      languageItems.push(this.renderLanguageItem(languages[key], key))
    })
    return (
      <View style={styles.container}>
        <HeadNavigation
          title={'语言设置'}
          navigation={this.props.navigation}
        />
        { languageItems }
      </View>
    )
  }
}

最后,就是在需要翻译切换的地方监听语言设置的变化了,简单的举个例子:

import EventBus from 'react-native-event-bus'
import Language from '../../language/Language'

componentDidMount() {
    EventBus.getInstance().addListener(Event.LANGUAGE_REFRESH, (this.languageListener = ()                 
    => {
        this.getUserInfo()
      })
    )
}

componentWillUnmount() {
    EventBus.getInstance().removeListener(
      this.languageListener
    )
}
render() {

    return (

        <Text style={styles.itemText}>{ Language.t('Message') }</Text>
    )

}

ok啦,看下效果图

默认为中文简体,效果图如下:

切换为英文,效果图如下:

关于文章有好的意见或者对IT技术有所见解或疑惑都可以与我交流!!

当然得注明来意,不添加备注不会通过,谢谢(私人QQ  非诚勿扰)!!