react-native 学习记录

1.用web storm 运行react-native 工程时，出错：xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
解决方法：在 终端执行如下命令 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

2.运行起来后，界面错误：No bundle URL present
解决方法：进入项目根目录
npm install
react-native run-ios

3.界面错误：expected a component class got [object Object]
组件首字母应该大写，例如：<Text><Text/>

4.组件的生命周期


20161101195539620.jpeg
装载之前：调用一次 配置state    constructor(props)
装载：相应方法在整个生命周期 只会调用一次
componentWillMount() {} 即将被装载
render(){} 渲染  这个方法可以被多次调用
componentDidMount() {}  装载完成

运行：相应方法在整个生命周期 可以被多次调用
componentWillReceiveProps(object nextProps){} 即将有属性更新
shouldConponentUpdate(object nextProps, object nextState) {}  
==> 是否应该更新  return true 更新   return false 结束不更新
componentWillUpdate(object nextProps, object nextState){} 组件即将刷新
render(){} 刷新
componentDidUpdate(object nextProps, object nextState){} 组件刷新结束


卸载：相应方法在整个生命周期 只会调用一次
componentWillUnmount(){} 组件即将卸载

5.PanResponder

import React, {Component} from 'react';
import {
    PanResponder,
    StyleSheet,
    View,
    Dimensions,
} from 'react-native';

export default class PYHPanResponer extends Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
        this._panResponder=PanResponder.create({
            /**
             *event.nativeEvent
             * nativeEvent
             changedTouches - 在上一次事件之后，所有发生变化的触摸事件的数组集合（即上一次事件后，所有移动过的触摸点）
             identifier - 触摸点的 ID
             locationX - 触摸点相对于父元素的横坐标
             locationY - 触摸点相对于父元素的纵坐标
             pageX - 触摸点相对于根元素的横坐标
             pageY - 触摸点相对于根元素的纵坐标
             target - 触摸点所在的元素 ID
             timestamp - 触摸事件的时间戳，可用于移动速度的计算
             touches - 当前屏幕上的所有触摸点的集合

             * gestureState:
             stateID - 触摸状态的 ID。在屏幕上有至少一个触摸点的情况下，这个 ID 会一直有效。
             moveX - 最近一次移动时的屏幕横坐标
             moveY - 最近一次移动时的屏幕纵坐标
             x0 - 当响应器产生时的屏幕坐标
             y0 - 当响应器产生时的屏幕坐标
             dx - 从触摸操作开始时的累计横向路程
             dy - 从触摸操作开始时的累计纵向路程
             vx - 当前的横向移动速度
             vy - 当前的纵向移动速度
             numberActiveTouches - 当前在屏幕上的有效触摸点的数量
             * */

            //成为响应者
            onStartShouldSetPanResponder: (event, gestureState) => {
                console.log('点击的时候 是否成为响应者');
                return true;
            },
            onStartShouldSetPanResponderCapture: (event, gestureState) => {
                console.log('点击的时候 是否要劫持这个响应 (嵌套的时候 这个是有用的。例当父子组件同时响应，让谁来处理事件)');
                return false;
            },
            onMoveShouldSetPanResponder: (event, gestureState) => {
                console.log('移动过程中 是否成为响应者');
                return false;
            },
            onMoveShouldSetPanResponderCapture: (event, gestureState) => {
                console.log('移动过程中 是否要劫持这个响应 (嵌套的时候 这个是有用的。例当父子组件同时响应，让谁来处理事件)');
                return true;
            },

            //响应手势相关操作
            onPanResponderReject: (event, gestureState) => {
                console.log('//响应者现在“另有其人”而且暂时不会“放权” ' +
                    '//参考onPanResponderTerminationRequest 理解');

            },
            onPanResponderGrant: (event, gestureState) => {
                console.log('现在要开始响应触摸事件了');
            },
            onPanResponderStart: (event, gestureState) => {
                console.log('开始手势操作');
            },
            onPanResponderMove: (event, gestureState) => {
                console.log('移动手势操作');
            },
            onPanResponderEnd: (event, gestureState) => {
                console.log('结束手势操作');

            },
            onPanResponderRelease: (event, gestureState) => {
                console.log('//用户放开了所有的触摸点，且此时视图已经成为了响应者。 ' +
                    '//一般来说这意味着一个手势操作已经成功完成。');
            },

            onPanResponderTerminate: (event, gestureState) => {
                console.log('另一个组件已经成为了新的响应者，所以当前手势将被取消。');

            },
            onPanResponderTerminationRequest: (event, gestureState) => {
                console.log('有其他组件请求接替响应者，当前的 View 是否“放权”？返回 true 的话则释放响应者权力');
                return false;
            },
            onShouldBlockNativeResponder: (event, gestureState) => {
                console.log('// 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者 ' +
                    '// 默认返回true。目前暂时只支持android。');
                return true;
            },
        })

    }
    render() {

        return (
            <View>
                <View
                    {...this._panResponder.panHandlers}
                    style={styles.view1}
                >
                </View>

                <View
                    {...this._panResponder.panHandlers}
                    style={styles.view2}
                >

                </View>
            </View>
        )
    }
}

var dimension = require('Dimensions');
const styles = StyleSheet.create({
    view: {
        backgroundColor:'red',
        height:dimension.get('window').height / 2,
    },
    view1: {
        backgroundColor:'blue',
        height:dimension.get('window').height / 4,
    },
    view2: {
        backgroundColor:'yellow',
        height:dimension.get('window').height / 4,
    },
})

6.网络请求 fetch

import MD5 from 'react-native-md5';

export default class RequestTool {
    constructor() {
        this.demain = 'http://192.168.10.25:8010/app/';
    };


    get(url,callBack) {
        let fetchOptions = {
            method:'GET',
            headers:{
                'Accept' : 'application/json',
                'Content-Type':'application/json',
            },
        };
        fetch(url,fetchOptions)
            .then((resposon)=>resposon.json())
            .then((resposonData)=>{
                callBack(JSON.stringify(resposonData));
            })
            .catch((error)=>{
                callBack(JSON.stringify(error));
            })
            .done();
    }
    
    post(url,params,callBack) {
        let fetchOptions = {
            method:'POST',
            headers:{
                'Accept' : 'application/json',
                'Content-Type':'application/json',
            },
            body:JSON.stringify({
                firstParam:params['oneValue'],
                secondParam:params['yourOtherValue'],
            })
        }
        fetch(url,fetchOptions)
            .then((resposon)=>resposon.json())
            .then((resposonData)=>{
                callBack(JSON.stringify(resposonData));
            })
            .catch((error)=>{
                callBack(JSON.stringify(error));
            })
            .done();
    }
    
    

    //例子
    login(userName, passWord) {
        const password = MD5.hex_md5(passWord);
        const url = this.domain + 'user/v1/login/' + userName + '/' + password + '/2';
        this.get(url,(result)=>{
            console.log('请求结果'+result);
        });
    }
}

//关于MD5的导入  这里引用了一个第三方库
//这里引入了一个md5加密的库，Github https://github.com/kmend/react-native-md5
//引入方式很简单，npm install react-native-md5 --save
//然后打开项目的package.json 查看，发现此时多了一个依赖

7.RN 本地简单缓存AsyncStorage

8.调试 开发者菜单的打开
command+d ios模拟器
command+m android模拟器

9.第三方库 依赖问题
RN中文网：https://reactnative.cn/docs/getting-started.html
分享：https://www.jianshu.com/p/62f8fc93a9a2

10.RN端口号的相关处理 运行多个RN项目
https://blog.csdn.net/fengyuzhengfan/article/details/77389953

终端
查看端口占用:  sudo lsof -i :8081
杀死相关应用(40247 应用的pid):  kill -9 40247

11.导航 react-navigation

12.警告：Warning: Each child in an array or iterator should have a unique "key" prop. Check the render ...
这个警告是在数组map创建组件的时候报的，需要在循环创建组件的时候 给每一个组件添加一个key

this.props.datas.map((data, index) => {
                        return (
                            <FlatList
                                data={data}
                                key={index} //这个属性  就是引起警告的元凶  试试将这个删掉 就会报哪个警告了
                                // keyExtractor={(item,index)=>item.Id}//这里因为在数据里面有设置key值 所以这里省掉了
                                renderItem={({item}) => <Text style={styles.flatItem}>{item.title}</Text>}
                        )
                    })

13.警告：Remote debugger is in a background tab which may cause apps to perform slowly. Fix this by foregrounding the tab (or opening it in a separate window).
这个警告处理方式 在index.js 里面给忽略了

import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Remote debugger']);

参考地址：https://stackoverflow.com/questions/41146446/get-rid-of-remote-debugger-is-in-a-background-tab-warning-in-react-native

14.运行报错：Print: Entry, ":CFBundleIdentifier", Does Not Exist
解决方案：https://blog.csdn.net/yuanshuaicsdn/article/details/77853941

最终用了这个终端命令.png

15.正常启动 无法进入调试模式 command+R没反应
iOS：https://blog.csdn.net/zouyunling1990/article/details/62046278
Android：https://blog.csdn.net/Liangingword/article/details/82689570

16.真机调试，debug的时候报错。主要体现在android，错误信息看下面

Access to fetch at 
'http://localhost:8081/index.delta?platform=android&dev=true&minify=false' 
from origin 
'http://90.168.10.209:8081' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

》 错误原因
访问的域名不同导致, 浏览器地址栏为90.168.10.209:8081/debugger-ui/, 真机或模拟器访问的地址为http://localhost:8081/index.delta?platform=android&dev=true&minify=false

浏览器窗口地址.png

》解决办法
将浏览器地址的90.168.10.209改为与访问地址相同的localhost即可

17.启动页 设置
参考博客，可以配下来

android启动页图片.png

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,014评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,796评论 3赞 386
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,484评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,830评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,946评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,114评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,182评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,927评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,369评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,533评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,166评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2赞 351

推荐阅读更多精彩内容