地图的实现

地图的参考文档，http://lbs.amap.com/api/javascript-api/gettingstarted

1.在webstrom中创建一个新的项目：

$ react-native init project --version 0.44.3

(project---项目名）

(version---版本号）

2.项目创建成功以后，双击ios文件夹中的后缀为.xcodeproj的文件，在xcode上面运行该项目

3.在文件夹中的index.ios.js书写TabBar，如下

/**

• Sample React Native App

• https://github.com/facebook/react-native

• @flow

*/

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View,

TabBarIOS

} from 'react-native';

import MyWebView from './common/MyWebView'

export default class Tolit extends Component {

constructor(props){

super(props);

this.state = {

defaultIndex:1

}

}

ChangeTab(index){

// alert(index);

this.setState({defaultIndex:index});

}

render() {

return (

title="卫生间"

icon={require("./img/toilet.png")}

selected={1==this.state.defaultIndex}

onPress={this.ChangeTab.bind(this,1)}>

title="电影"

icon={require("./img/movie.png")}

selected={2==this.state.defaultIndex}

onPress={this.ChangeTab.bind(this,2)}

我是电影

title="阅读"

icon={require("./img/read.png")}

selected={3==this.state.defaultIndex}

onPress={this.ChangeTab.bind(this,3)}

我是阅读

title="设置"

icon={require("./img/set.png")}

selected={4==this.state.defaultIndex}

onPress={this.ChangeTab.bind(this,4)}

我是设置

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1,

}

});

AppRegistry.registerComponent('Tolit', () => Tolit);

4.MyWebView是一个组件，为了使错误变得通俗易懂，如下

import React, { Component } from 'react';

import {

StyleSheet,

Text,

View,

WebView,

ActivityIndicator

} from 'react-native';

class MyWebView extends Component{

constructor(props){

super(props);

this.setError = this.setError.bind(this);

this.state={

isError:false

}

}

render(){

if(this.state.isError){

return (

服务器错误或者网络地址错误！

)

}else{

return(

source={{uri:this.props.uri}}

onError={this.setError}

)

}

}

setError(){

this.setState({isError:true})

}

}

const styles = StyleSheet.create({

loadStyle:{

flex:1,

// justifyContent:"center",

color:"red"

},

wordStyle:{

color:"red"

}

})

export default MyWebView;

5.新建一个html文件夹，在该文件夹下建一个html文件，代码如下

----key值需要去高德官网新建一个应用，选择web应用，就会得到相应的key值---

image.png