React Native 十万个为什么开发问题整理

扫码加入react-native技术交流群。定期会分享react native 技术文章，移动技术干货,精彩文章技术推送。欢迎各位大牛,React Native技术爱好者加入交流！

在ScrollView中切换输入框<TextInouput>，为什么需要点击两次才能实现？

答:这是由于ScrollView也会相应点击事件，解决这个问题,只需要在ScrollView组件中添加两个属性:
keyboardShouldPersistTaps='always'
keyboardDismissMode={'on-drag'}

Android设备中InteractionManager.runAfterInteractions中的回调方法不执行？

InteractionManager.runAfterInteractions(() => {
  // ...耗时较长的同步的任务...
});

造成这种问题原因，主要是因为动画线程抢夺导致冲突，例如转场动画，自定义动画导致。解决方式有两种：

（1）自定义动画设置属性useNativeDriver，开启原生硬件动画渲染支持

（2）自定义InteractionManager的runAfterInteractions：

import { InteractionManager } from "react-native";
export default {
  ...InteractionManager,runAfterInteractions:  f => {
    // ensure f get called,timeout at 500ms
    // @gre workaround https://github.com/facebook/react-native/issues/8624
    let called = false;
    const timeout = setTimeout(() => { called = true; f() },500);
    InteractionManager.runAfterInteractions(() => {
      if (called) return;
      clearTimeout(timeout);
      f();
    });
  }
};

点击列表页中的Item ，传递不同的参数到详情页，显示不同的内容，再点击慢的情况下没有问题，再点击快的时候会出现数据不更新的情况，导致数据显示错误，怎么解决？

答：这是因为原有的详情页还没有卸载，然后就点击了列表页的item，然后传参数到详情页，
此时不会创建新的详情页，原有详情页会接收传过来的参数通过 componentWillReceiveProps
 方法，此时需要判断相关数据是不是需要重新渲染（或者说现在的详情页需要显示的数据和上
一次的详情页显示的数据是不是一致），如果需要重新渲染，则重新初始化数据，重新调接口，
重新渲染界面。


    // 1. 必须在componentWillReceiveProps(nextProps)生命周期中接受传递的参数
    // 2. 该生命周期方法中的参数必须叫做nextProps
    // 3. 所有传递过来的参数都包含在nextProps参数中
    // 4. 以nextProps.PARAM_NAME的方式获取指定的参数
    componentWillReceiveProps(nextProps) {
        /**
         * todo 判断是不是第一次进入该界面或者说该界面需要重新渲染，
         * todo 主要用于组件还没有卸载，就又调用了该组件，因此会走componentWillReceiveProps方法。
         */
        let isFirstComeIn = nextProps.rowData.order_id != this.props.rowData.order_id;//im

        InteractionManager.runAfterInteractions(() => {
            if (isFirstComeIn) {
                this.onFirstComeIn();
                return;
            }
        });

    }

在react-native中，如果一个组件数据的刷新需要联网，在网络数据返回后更新页面，这个时候，需要在刷新页面的时候判断一下该组件是否处于加载状态，如果不在加载状态，那么不应该调用this.setState()去更新state，可以按以下方法来进行处理：

工具类：BaseCommon.js

/**
 * BaseCommon
 * 公共逻辑处理
 */
'use strict';

import React from "react";

export default class BaseCommon {
    constructor(props) {
    }

    componentWillMount() {
    }

    componentDidMount() {
        this.mounted = true;
    }

    componentWillUnmount() {
        this.mounted = false;
    }

}

通过BaseCommon.js 来对当前组件进行加载状态判断

export default class IndexScreen extends BaseComponent {
    // 构造
    constructor(props) {
        super(props);
        this.baseCommon = new BaseCommon({ ...props,});

        // 初始状态
        this.state = {
        };
    }

    componentDidMount() {
        this.baseCommon.componentDidMount();

        fetch().then((response) => {
                this.baseCommon.mounted && this.setState({});
            })
    }

    componentWillMount() {
        this.baseCommon.componentWillMount();
    }

    componentWillUnmount() {
        this.baseCommon.componentWillUnmount();
    }
}