React Native键盘遮挡

参考文章:https://www.jianshu.com/p/99c0adcf6052

在iOS平台下实现自动管理键盘你只需要将IQKeyboardManager文件夹添加到自己的iOS工程即可,Android平台不需要添加其他库,系统自动处理。

下载地址:https://github.com/guangqiang-liu/react-native-keyboardManager

Ant Design Mobile React Native ImagePicker显示暂无数据

问题:Ant Design Mobile React Native的ImagePicker组件实现图片上传,结果提示“暂无数据”。

原因:蚂蚁这个框架的ImagePicker也是调用了一个第三方的开源组件react-native-camera-roll-picker,这个第三方组件的作者也是粗心,有个属性groupTypes的默认值有问题,结果Ant框架在封装的时候也没修复,不过幸好留了个cameraPickerProps可以给这个第三方间接传过去。

方法:

<ImagePicker
    title={"上传评测报告"}
    cancelText={"取消"}
    selectable={true}
    onChange={this.handleFileChange}
    files={this.state.files}
    cameraPickerProps={{
        groupTypes: "All"
    }}
/>

资料:https://github.com/jeanpan/react-native-camera-roll-picker/issues/32

React Native WebView injectedJavaScript不生效

<WebView
    style={{width: width, height: height, marginBottom: 20}}
    source={{ uri: this.props.route.params.url }}
    injectedJavaScript={this.props.route.params.injectedJavaScript}
    javaScriptEnabled={true}
    domStorageEnabled={true}
    mixedContentMode={'compatibility'}
    onMessage={(event) => {
        console.log('event: ', event)
    }}
/>

解决办法:WebView配置上onMessage属性,injectedJavaScript注入的JS代码就生效了

React Native webview中video播放MP4格式视频只有音频

参考文章:https://blog.csdn.net/shaobo8910/article/details/81121965?utm_source=blogxgwz8

昨天遇到了这样一个问题,我打算使用HTML5的video标签简单的在网页上插入一个MP4视频,类似这样

<video preload=”none” controls>
<source src=”video.mp4″ type=”video/mp4″>
</video>
但是在网页中我点击播放的时候,却发现只有声音而没有图像。不过我用电脑中的视频播放器播放这段视频还是可以看到图像的。那么问题来了,这个锅谁来背?

问题出在哪

经过一些搜索得知,其实根本的问题是虽然大家都是.mp4后缀的文件,但是编码方式不同,而video标签的标准是用H.264方式编码视频的MP4文件(当然video标签还可以播放WebM和OGG格式的文件,这里就不多说了),而我之前使用的视频文件是Xvid编码的MP4文件,所以只能播放出音频而不能看到图像

解决方法

既然知道了问题出在哪,接下来就要想办法把我现有的视频文件转码成H.264编码的文件。
我使用的是Mac, 而且之前并没有装过什么视频转码的应用,搜索了一下发现Mac自带一个功能叫“编码所选视频文件”,我尝试着使用了一下。发现然并卵,生成的文件就像我在浏览器中播放的一样,只有声音没有图像,大概这个功能更适合吧其他格式的文件转换成MP4吧。
经过进一步搜索,发现了ffmpeg这个神器,使用这个命令行的工具,最终完成了视频编码的转换,下面详细介绍一下转换的方法

安装并使用 ffmpeg

我使用的是Mac,并且安装了homebrew,所以可以直接通过homebrew安装ffmpeg

brew install ffmpeg
其实ffmpeg的指令有很多,想要详细了解可以参见ffmpeg参数中文详细解释,这里我只需要把一个其他编码格式的MP4文件转换成H.264编码的MP4文件,具体指令如下

ffmpeg -i input.mp4 -vcodec h264 output.mp4
自行替换input和output文件名就可以了,其实这里input文件还可以是其他格式的视频文件,ffmpeg可以自动识别转换的方式,非常便利!
经过上述转换,使用输出的文件在Chrome上播放就没有问题了

React Native打包Android APK安装包出错: Original is here. The version qualifier may be implied.

React Native项目,用命令打包Android APK安装包,执行命令gradlew assembleRelease后,总是报如下错误:

/Users/liujin/Downloads/xxx/android/app/build/intermediates/res/merged/release/drawable-mdpi-v4/androidjs_imagebag_pageonei_wkt1.jpg: error: Duplicate file.

/Users/liujin/Downloads/xxx/android/app/build/intermediates/res/merged/release/drawable-mdpi/androidjs_imagebag_pageonei_wkt1.jpg: Original is here. The version qualifier may be implied.

解决办法:

用Android Studio打开android目录,找到res/drawable目录,把里面的图片文件都删掉(因为这些图片都是React Native自动生成的,所以删除即可)。再次重新执行gradlew assembleRelease命令就不会报错了。

 

附:《React Native安卓项目打包APK》