【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').width
const 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" />

定位成功显示：