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]
组件首字母应该大写，例如：

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 (
            
                
                

                

                
            
        )
    }
}

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 (
                            item.Id}//这里因为在数据里面有设置key值 所以这里省掉了
                                renderItem={({item}) => {item.title}}
                        )
                    })

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

react-native 学习记录

你可能感兴趣的:(react-native 学习记录)