RN开发积累

最新推荐文章于 2022-09-23 14:58:48 发布

王坡同学

最新推荐文章于 2022-09-23 14:58:48 发布

阅读量423

点赞数

分类专栏： ReactNative 文章标签： javaScript

本文链接：https://blog.youkuaiyun.com/WangPoTongXue/article/details/100744142

版权

ReactNative 专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了React Native开发中的一些关键知识点，包括组件导入方式、PureComponent的使用、即将更改的生命周期方法、React上下文、PanResponder的事件处理、flex布局以及Redux的状态管理。还涉及到JSX语法、渐变色、定时器的使用和对象赋值等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、React组件可以通过两种方式导入另一个组件

https://www.cnblogs.com/soyxiaobi/p/9573897.html
1、import(ES6)
最终通过Babel转换成CommonJS

export default component... 导出方式

import component from './component'

如果需要通过动态路径动态加载组件,在class里面(ES6)语法使用import会报下面错误:
Module build failed: SyntaxError: ‘import’ and ‘export’ may only appear at the top level
这时候使用require方法能很好解决 var xxx = require(‘xxx’)

2、require（CommonJS）

module.exports = component  导出方式

const component = require('./component')

在这里插入图片描述

2、组件引用方式

1、
 <FlatList   ref = { flatList => this.sectionList = flatList} />

this.sectionList

2、
 <FlatList  ref=‘sectionList’ />

this.refs.sectionList

3、PureComponent

继承PureComponent时，不能再重写shouldComponentUpdate，否则会引发警告；
继承PureComponent时，进行的是浅比较，也就是说，如果是引用类型的数据，只会比较是不是同一个地址，而不会比较具体这个地址存的数据是否完全一致；
将 const words = this.state.words; 改为const words = this.state.words.slice(0); 重新渲染

4、即将更改的生命周期

https://www.imooc.com/article/27954?block_id=tuijian_wz

(1) UNSAFE_componentWillMount
(2) UNSAFE_componentWillReceiveProps
(3) UNSAFE_componentWillUpdate。
getDerivedStateFromProps
getSnapshotBeforeUpdate

5、 React 上下文(Context)

getChildContext 定义在父组件中，指定子组件可以使用的信息
childContextTypes 定义在父组件中，getChildContext 指定的传递给子组件的属性需要先通过 childContextTypes 来指定，不然会产生错误
子组件需要通过 contextTypes 指定需要访问的元素。 contextTypes 没有定义， context 将是一个空对象。

父组件
getChildContext() {
    var skuId = "";
    var questionId = "";
    if (this.props.skuId) {
      skuId = this.props.skuId;
    }
    if (this.props.questionId) {
      questionId = this.props.questionId;
    }
    return {
      skuId: skuId,
      questionId: questionId,
    }
  }


JDTHReactCustomerQA.childContextTypes = {
  skuId: PropTypes.string,
  questionId: PropTypes.string,
}


子组件
  static contextTypes = {
        skuId: PropTypes.string,
    };


this.context.skuId

6、PanResponder

componentWillMount(evt, gestureState){

    this._panResponder=PanResponder.create({

      onStartShouldSetPanResponder:this.onStartShouldSetPanResponder,
      onMoveShouldSetPanResponder:this.onMoveShouldSetPanResponder,
      onPanResponderGrant:this.onPanResponderGrant,
      onPanResponderMove:this.onPanResponderMove,
      onPanResponderRelease:this.onPanResponderEnd,
      onPanResponderTerminate:this.onPanResponderEnd,

    });
  }

onStartShouldSetPanResponder：用户开始触摸屏幕的时候，是否愿意成为响应者；默认返回false，无法响应，当返回true的时候则可以进行之后的事件传递。

onMoveShouldSetPanResponder：在每一个触摸点开始移动的时候，再询问一次是否响应触摸交互；

onPanResponderGrant：开始手势操作，也可以说按下去。给用户一些视觉反馈，让他们知道发生了什么事情！（如：可以修改颜色）

onPanResponderMove：最近一次的移动距离.如:(获取x轴y轴方向的移动距离 gestureState.dx,gestureState.dy)

onPanResponderRelease：用户放开了所有的触摸点，且此时视图已经成为了响应者。

onPanResponderTerminate：另一个组件已经成为了新的响应者，所以当前手势将被取消。

  //用户开始触摸屏幕的时候，是否愿意成为响应者；
  onStartShouldSetPanResponder(evt, gestureState){
   		return true;
  }
  //在每一个触摸点开始移动的时候，再询问一次是否响应触摸交互；
  onMoveShouldSetPanResponder(evt, gestureState){
   return true ;
  }

//开始手势操作。
onPanResponderGrant(evt, gestureState){
    console.log('onPanResponderGrant...');
  
  }

这三个点其实就是对象的扩展运算符，说白了就是把panHandlers对象里面所有的属性填充到View中。
<View {…this._panResponder.panHandlers} />

7、布局篇flex

//位置
position:‘absolute’ ‘relative’

//边框
borderWidth：10
border< Top | Left | Bottom | Right |>Width

//边框颜色
borderColor :‘red’
border<Bottom | Left | Right | Top>Color

8、 JSX中的{}


export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}


请注意{pic}外围有一层括号，我们需要用括号来把pic这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式，需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。

9、渐变色

<LinearGradient
                start={{x: 0, y: 0}} 
                end={{x: 1, y: 0}}
                colors = {['#F20000', '#FF4F18']}
                style ={styles.drawButton}
                >
                <JDText style={styles.buttonText}>{this.props.buttonText}</JDText>
                </LinearGradient>

10、setTimeout 和 setInterval

setTimeout(fn,t),超时调用，超过时间t，就执行fn。
setInterval(fn,t),间歇调用，调用周期t，执行fn。

二者调用后，均返回一个数值ID，此ID是代码的唯一标识符，可以通过它来取消尚未执行的调用。

clearTimeout(id)
clearInterval(id)。

取消间歇调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间歇调用将会一直执行到页面卸载。

1、setTimeout(fn,t)中t告诉JS再过多久把当前任务添加到队列中。并不是执行的到setTimeout就添加任务。如果队列是空，那么添加的代码会立即执行；如果队列不空，那么它就要等前面的代码执行完了以后在执行。

2、setInterval(fn,t)，在间歇调用时，会出现一些意外。

触发下一个func函数时，上一个func还没有执行完，那么此时第二个func会在队列（event loop）中等待，直到第一个函数执行完，第二个func立即执行；

当第一个函数的执行时间特别长，以致于在执行过程中出发了多个func时，就会导致第3个func及以后的函数被忽视。

因为任务队列中不会有两个及以上同一个定时器的回调函数

如何保证每次执行的间隔一样呢，可以使用setTimeout代替setInterval。

var timer = setTimeout(function() { 
   执行内容....
    timer = setTimeout(arguments.callee, 2000)//再次调用
  }, 2000)

11、Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign(target, source);

12、函数立即执行

(function () {
alert(1);
})()

13、模态

  <Modal animationType={'none'}
                transparent={true}
                visible={this.isShowDeletePopup}
                onrequestclose={() => {
                    this.isShowDeletePopup = false
                }}
                onShow={() => {
                    
                }}>
                </Modal>