【React Native开发】

前言

学习React-Native中遇到了各种各样的坑，今天把遇到的问题一一总结出来。

1.react-native 中Iamge加载本地图片显示不出来

import React ,{Component} from 'react'import {    StyleSheet,    View,    Image,    Text,    Dimensions,} from 'react-native'const width = Dimensions.get('window').widthconst netIconUrl = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1488603440089&di=fd01ac658351fbc5b3d4009d076085c8&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F55e736d12f2eb93895023c7fd7628535e4dd6fcb.jpg'const nativeIcon = {src:require('./images/timg.jpg')}const nativeIconUrl = './images/timg.jpg'export default class ImageComponent extends Component{    render(){        return (            <View style={styles.container}>                <Text style={styles.textStyle}>加载网络图片</Text>                <Image style={styles.netImageStyle} source={{uri:netIconUrl}}></Image>                <Text style={styles.textStyle}>加载本地图片</Text>                <Image style={styles.netImageStyle} source={nativeIcon.src}></Image>            </View>        )    }}const styles = StyleSheet.create({    container:{        flex:1,    },    textStyle:{        fontSize:16,        lineHeight:20,        textAlign:'center',        marginBottom:10,        marginTop:10,    },    netImageStyle:{        height:200,        width:width,    },})

本地图片加载出现的问题解决方法：

<Image style={styles.netImageStyle} source={require(nativeIconUrl)}/>加载本地图片的方式是不可以的，会报错但有的时候会需要先把路径保存在变量中，再require,但是，但是require的参数不能是个变量，会导致路径问题。

2.Warning:Each child in an array or iterator should have a unique "key" prop.

var list = [];for (var i in Model){    if (i%2===0){        var row = (            <View style={styles.row}>                <FruitListItem                    url={Model[i].url}                    title={Model[i].title}                    press={this.press.bind(this,Model[i])}>                </FruitListItem>                <FruitListItem                    url={Model[parseInt(i)+1].url}                    title={Model[parseInt(i)+1].title}                    press={this.press.bind(this,Model[parseInt(i)+1])}>                </FruitListItem>            </View>        );        list.push(row)    }出现以下异常：

解决方法：

var list = [];for (var i in Model){    if (i%2===0){        var row = (            <View style={styles.row} key={i}>                <FruitListItem                    url={Model[i].url}                    title={Model[i].title}                    press={this.press.bind(this,Model[i])}>                </FruitListItem>                <FruitListItem                    url={Model[parseInt(i)+1].url}                    title={Model[parseInt(i)+1].title}                    press={this.press.bind(this,Model[parseInt(i)+1])}>                </FruitListItem>            </View>        );        list.push(row)    }

3.react native 定位Geolocation

在react-native中自带定位的api,无需引入第三方的js,react-native定位是通过Geolocation实现的。

下面介绍一下Geolacation的三个静态方法：

1.static getCurrentPosition(callSucess,callError,options),获取第一次定位的位置信息，第一个参数是成功时的回调，第二个参数是失败时的回调，

第三个参数是传递参数。

在请求成功函数中有以下属性：

经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)
在请求失败函数中有4种情况（err.code状态值）：

1为用户拒绝定位请问
2暂时获取不到位置信息
3为请求超时
4未知错误

第三个options是可选参数，属性如下：enableHighAccuracy——指示浏览器获取高精度的位置，默认为false。当开启后，可能没有任何影响，也可能使浏览器花费更长的时间获取更精确的位置数据。
timeout——指定获取地理位置的超时时间，默认不限时。单位为毫秒。
maximumAge——最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。默认为0，表示浏览器需要立刻重新计算位置

2.static watchPosition(callSucess,callError,options),监听定位位置的改变

3.static clearWatchID(watchID),由于可能会出现缓存的情况，Geolocation提供了可以清除缓存的方法clearWatch，清除上一次的定位信息。

var Geolocation = require('Geolocation')

Geolocation.getCurrentPosition(function (data) {    alert(JSON.stringify(data))},function () {    alert('获取位置失败')})

问题：getCurrentPosition()定位位置信息，显示定位失败

解决方法：

1.查看手机定位是否打开

2.若是Android系统需要在AndroidManifest.xml中加入以下权限

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

定位成功显示：