前端日常开发问题及解决方案

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

今天来分享分享平时开发遇到的一些问题及解决方案

react-native

1、list循环内 item 的key应当使用唯一的`id`（唯一标识）而不是`index`，不然可能导致一些异常的状态问题，示例：

render(){
    return <View>
        {
            data.map((item) => {
                   return <Text key={item.id} >{item.name}</Text>	
            })
        }
    </View>
}

比如你有1、2、3条列表，状态分别是1）、2）、3），然后你把1给删除了，2挤上去变成了第一条，导致有可能你的2的状态还是1）。

2、使用`borderRadius`变圆角，在IOS上必须写在View标签上，直接写在Text上无效。

render(){
    return <View style={{borderRadius: 5}}>
        <Text>文字</Text>	
    </View>
}

3、关闭PNG合法性检查，解决报错如：`java.util.concurrent.ExecutionException: com.android.builder.internal.aapt.v2.Aapt2InternalException: AAPT2 aapt2-3.3.1-5013011-windows Daemon #3: Unexpected error during compile 'D:\myProject\android\app\build\generated\res\react\release\drawable-xxhdpi\src_assets_img_work_modelbg1.png', attempting to stop daemon.`

解决方法：

在App下的build.gradle文件加：

aaptOptions.cruncherEnabled = false
aaptOptions.useNewCruncher = false

4、`measure`方法获取到的位置都是`undefined`

解决方法：在元素上加collapsable={false}

mui开发

1、IOS端弹出键盘时，会导致fixed元素错误

解决方法：监听window区域高度变化，来把fixed 的元素变成static。

plus.webview.currentWebview().setStyle({  // 设置允许屏幕缩放
     softinputMode: "adjustResize"
});
var winHeight = $(window).height();
$(window).resize(function(){  
    if(Math.abs(+winHeight - +nowHeight) > 50){
        $(".mui-bar").css("position","static");
    }else{
        $(".mui-bar").css("position","fixed");
    }
});

注意：先设置 softinputMode: "adjustResize"，这样才可以监听到窗口变化。

2、IOS双击导致屏幕上滑或者下滑，导致元素错位

解决方法：

// 阻止用户双击使屏幕上滑
 var iLastTouch = null;    // 缓存上一次tap的时间
 if (mui.os.ios){
    document.body.addEventListener('touchend', function(event){
        var iNow = new Date().getTime();
        iLastTouch = iLastTouch || iNow + 1; // 第一次时将iLastTouch设为当前时间+1
        var delta = iNow - iLastTouch;
        if (delta < 500 && delta > 0){
            event.preventDefault();
            return false;
        }
        iLastTouch = iNow;
    }, false);
}

3、mui.openWindow()打开页面，这样页面已经存在的情况下，不会重新加载这个页面。

解决方法：监听这个页面的show方法，显示的话则reload一次。

var myWeb = plus.webview.currentWebview();

myWeb.addEventListener('show', function(e){
    myWeb.reload();
}, false);

4、IOS new Date兼容性问题

解决方法：将xxxx-xx-xx的时间格式，转换为 xxxx/xx/xx的格式

let myTime = time.replace(/\-/g, "/");

5、input的disabled在iOS端默认样式问题

解决方法：重写样式

-webkit-text-fill-color: #000;
-webkit-opacity: 1;
color: #000;

其他问题

1、Video标签想使用内容填充满复整个容器。

解决方法：加上object-fit: fill样式 ---不过不兼容IE及edge