前言

最近刚用react-native（以下简称RN）开发完一个app，趁着项目上线了，有了缓冲的时间，把自己在项目中遇到的问题以及坑定做个复盘。下次遇到的时候能快速定位到问题所在。以便能快速解决。同时希望能帮助到其他有需要的小伙伴。

一、安卓如何显示gif图片

RN官方文档中说明Image组件是支持gif格式图片显示的。于是乎我就直接像下面的方式引用了gif图片。可是在模拟器上以及真机上都展示的是一个静态图片。并没有动起来。。这真的让人很头大啊。

<Image source={{ uri:'https://dashubao-app.oss-cn-shanghai.aliyuncs.com/common/img/Lark20200604-175928.gif' }} style={styles.downStatus} />

别急，遇到问题就让我们去解决它。解决方法如下。这里有个注意点fresco这个库要记得用最新版本。否侧会还是没有效果。

// android/app/build.gradle
// 让安卓支持gif图片显示
implementation 'com.facebook.fresco:fresco:2.2.0'
implementation 'com.facebook.fresco:animated-gif:2.2.0'

二、对图片使用定位后，在真机上不能触发触摸事件

这个问题折磨了我好久，现在还是想不明白为什么会这样。希望有知道的大佬指点一二

<!--这个图片的触摸事件在真机上不起作用-->
 <TouchableOpacity onPress={this.jumpDetail}>
    <Image source={require('../../assets/images/btn.png')}
        style={s.btn}
    />
</TouchableOpacity>
<!--之前的样式-->
 btn: {
        position:'absolute',
        left:300,
        top:500
        zIndex: 10,
        width: pTd(203),
        height: pTd(185)
    },
<!--修改后的样式-->//起作用的样式
  btn: {
        marginLeft: 300,
        marginTop: 500,
        zIndex: 10,
        width: pTd(203),
        height: pTd(185)
    },

原本采用的position:absolute 改用marginTop和marginLeft来代替。

三、适配Iphonex等设备底部按钮的方法

<!--判断是否是iphonex等设备的方法-->
const isIphoneX = () => {
    return (
        isIos() &&
    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
    ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
    );
};

<!--如果是iphone想暴露方法给外部调用使用-->
export default {
    ifIphoneX(iphoneXStyle, iosStyle, androidStyle) {
        if (isIphoneX) {
            return iphoneXStyle;
        } else if (devicePlatform.isIos) {
            return iosStyle;
        } else {
            if (androidStyle) return androidStyle;
            return iosStyle;
        }
    }
};

<!--在组件中的使用-->
const s=StyleSheet.create({
    ...IphoneX.ifIphoneX({
        marginBottom: deviceSize.homeKeyHeight
    }, {
        marginBottom:0
    })
})

四、Image组件使用问题

Image组件在使用中要记得设置宽高，这点跟html的img标签不一样。它没有默认宽高。否则会显示不出来。

引用本地图片：

<Image source={require('../images/logo.png')} />

引用网络图片：

<Image source={{uri:'https://static/images/logo.png'}} />

具体的属性和使用方法可以看官方文档

五、自适应图片组件

在开发的过程中，我们可能不知道某些网络图片的宽高。所以在不知道宽高的情况下就没法给它设置宽高。我们上面讲到。不设置宽高就没法显示图片。这个组件真是一点都不人性化。但是我们要想办法解决啊。对程序员来说就没有解决不了的问题。。如果有的话，那就一定是需求出了问题。

  componentDidMount() {
        //主要是使用Image的getSize方法方法的具体使用可以看文档介绍
        Image.getSize(this.props.uri, (width, height) => {
            if (this.props.width && !this.props.height) {
                this.setState({ width: pTd(this.props.width), height: pTd(height * (this.props.width / width)) });
            } else if (!this.props.width && this.props.height) {
                this.setState({ width: width * (this.props.height / height), height: this.props.height });
            } else {
                this.setState({ width: width, height: height });
            }
        });
    }
    //使用
     <Image source={this.state.source}
                resizeMode={'contain'}
                style={{ height: this.state.height, width: this.state.width }} />

六、Xcode真机调试的时候遇到ios13高版本的系统，不能安装App到手机里的解决办法

在使用真机调试的时候，有时候会遇到这样的错误，意思是当前的Xcode不具体当前移动设备的系统驱动。所以不能安装应有到手机里面。解决方法有两种：

1、更新Xcode

2、下载当前的驱动到本地，并放入Xcode的目录具体使用方法请看链接

七、react-native-swiper组件使用问题

最近在使用这个组件做轮播图的时候遇到个bug，在使用onIndexChanged属性并且设置了loop为true的时候轮播图轮播顺序会变得混乱。在真机上测试安卓上貌似没有问题。ios则非常明显。网上也有很多人遇到这样的问题貌似只有设置为loop为false的时候才启动作用但是这样不符合产品需求啊：最终我的解决方法是使用renderPagination来进行代替

const renderPagination = (index, total, context) => {
    return (
        <View style={styles.bannerIndex}>
            <Text style={styles.span1}>-</Text>
            <Text style={styles.span2}>{index + 1}</Text>
            <Text style={styles.span1}>-</Text>
        </View>
    );
};

未完，持续更新中。。。。。

React Native 开发小结

前言