React Native 0.46 正式版发布



  • 一、通用


    重大变化

    • 更好的 TextInput: contentSize 这个属性从 TextInput.onChange event 中移除了

    现在 contentSize 的属性已经被彻底移除了,如果有用到该功能的可以使用 onContentSizeChange 代替。

    • 现在如果在 <Image> 标签中嵌套其他组件现在会报黄盒警告

    之所以这样做是因为嵌套了其他组件后,会导致 <Image> 组件的尺寸变得不可控,如果非要这样的话,可以考虑使用 <ImageBackground> 组件来代替。而且之前因为这个特性,必须得给 <Image> 设置明确的大小,但是现在它可以根据 bitmap 来自动推断尺寸了。

    修复 Bug

    • 修复索引 RAM bundles 的代码生成
    • 修复当存在多个 manifests 文件时 react-native link 命令出现的问题
    • 修复 stickySectionHeader 重新渲染的问题
    • 修复 KeyboardAvoidingView 组件的问题
    • Fix Native Animated - Call x.__makeNative before super.__makeNative
    • 修复 TextInput 的 padding 和 border 尺寸的计算和布局
    • 修复当存在多个 section 时 ListViewMock 唯一 key 的错误

    新特性

    • Native Animated: 防止设置了useNativeDriver: true 属性后,该动画被系统优化
    // 该特性解决了如下代码会报错的问题
    // translateY 是设置了 `useNativeDriver: true` 的动画
     <Animated.View style={{flex: 1, transform: [{ translateY }]}} />
    
    • 修复当 node<4 时在 react-native-cli 中报错(const -> var)
    • 给 View 添加多个属性(大部分是关于辅助操作的)
    • 在 FlatList 上使用 flexWrap 属性会报警告
    • Add error message when calling sync methods from the Chrome debugger
    • 添加提示消息来提醒开发者在调试时要开启 WIFI
    • 介绍使用 <ImageBackground> 来代替 <Image> 来进行嵌套组件的展示
    • 每次 batch 只调用一次 callImmediates 方法
    • 当需要获取定位信息时自动进行定位权限的请求
    • 暴露 requestAuthorization 方法 (用于请求定位权限)
    • 当 SectionList 中某个 section 里没有数据的时候也进行 section footer 的渲染
    • ART: 如果给 fontWeight 设置了 integer 值,则自动调用 toString 方法对属性进行转换
    • 将 XMLHttpRequest 的 withCredentials 属性的默认值改为 "true"
    • CLI: Adding shebang to setup_env.sh script
    • 强制将 TextInput 中的 alignSelf: stretch 属性删除
    • 单行 <TextInput> 有了固定的高度(占位字符的高度)
    • 统一 <TextInput> 在多行输入和单行输入的布局逻辑
    • VirtualizedList: 在 _updateViewableItems 方法中传入 props.data 代替直接传入 props
    • 更新 inquirer 依赖库版本(0.12.0->3.0.6)以更好的支持交互式命令行提示
    • 允许 module 通过 BatchedBridge 进行懒注册
    • 改进 View 中部分 props 和 style 相关的内容
    • 在 requestIdleCallback 中添加 options 属性,解决在开启 Debug JS Remotely 后某些真机不回调该方法的问题
    • 添加在 JSContext 线程之外的其他线程进行 GC 的能力
    • 在主线程创建 JS executor 和 context

    文档 Doc

    • 更新使用文档中的 Getting Started,新增了 CRNA 的使用介绍

    CRNA 全名叫 creat-react-native-app,可以帮助我们免搭建 Naitve 开发环境直接进行 RN 应用的开发,具体使用方法可以看我公众号里另一篇文章《更快速的 React Native 应用开发之道 《React Native 高效开发》之 create-react-native-app

    • 文档多处进行改进(主要关于**“在设备上运行”“集成到现有 App”**部分的文档)
    • 在 Getting Started、Debugging、Running on Device 几个部分的文档进行了一些语序和语法的调整
    • 阐明不同导航库之间的利弊
    • 在 ListView 相关文档中推荐使用 FlatList, SectionList 代替现有的 ListView
    • 修复一些语法 / 语句结构的错误

    Yoga

    • 修正 print 边缘值
    • 修复在绝对布局中使用 right 和 bottom 属性时的布局问题
    • 修复在设置了 flexWrap 的容器中使用绝对定位进行布局时的问题
    • Parse YogaValue from string. inverse of toString()
    • Fixing potential measure call with negative size value
    • 改变了 pointScaleFactor 的使用,以避免累积错误
    • 用 ellipsizeMode 代替了 lineBreakMode

    Packager

    • 修复 OSS 集成测试Fix integration test for OSS
    • 使用 buildID 来取代文件路径在 reporting 中的标识作用
    • ResolutionRequest: 抽取 FileNameResolver 类
    • Terminal: 移除全局状态
    • AssetServer: 移除 fs 超时
    • 添加 "node" 环境到 packager .eslintrc
    • 为 buck worker 添加预处理机制
    • 添加缺失的依赖库:Add missing dep
    • 添加基础的 top-level 集成测试
    • 添加 CLI 命令 --dev,可以直接在命令行中切换项目的环境
    • ResolutionRequest: factor error handling in resolution
    • 运行 packager.sh 使用 '.' 代替 'source' 来兼容不同操作电脑系统
    • ResolutionRequest: 处理 empty module 时的特殊情况
    • DependencyGraph: 格式化代码
    • ResolutionRequest: use _loadAsFile from _loadAsDir
    • ResolutionRequest: 重构 _loadAsDir 和依赖关系
    • 将 packager 启动脚本从 packager/ 目录移到scripts/目录
    • TransformCache: 在该类外部获取 root path 的选择
    • 将 packager 的核心逻辑代码从 local-cli 移到 packager 目录
    • TransformCaching: API 提供方法可以选择缓存路径
    • 升级 jest-haste-map 版本(19.0.0 --> 20.0.4)
    • Module: 摆脱各种 callbacks
    • 不再在 packager/ folder 内部引用 setupBabel
    • AsyncTaskGroup: @flow
    • Server: 更加一致的错误处理方式
    • 打包时按需分配构建模块
    • 将 sourceMappingURL 从块注释改为行注释
    • 创建 OutputFn 可以构建索引的 RAM bundles
    • 简化文件类型:map 可为空但不是可选的
    • ModuleTransportLike 的协变属性
    • 在 ModuleTransportLike 中只使用 $ReadOnlyArray
    • 在 DependencyGraph-test 中正确的模拟路径
    • 从主入口处删除对 setupBabel 的调用

    二、iOS


    修复 Bug

    • Native Animations - 修复极小可能出现的动画恢复默认值的问题
    • 修复在 ModuleData 类中 读 / 写 _instance 变量时的数据竞赛

    新特性

    • 在 iOS 版本的 UIExplorer 中添加 ART 库,以及相关的示例和测试
    • 在 RCTLinkingManager 中新增推荐方法,代替 Apple 在 iOS9 中已标记为过期的方法
    • 在 iOS 上添加对 flashScrollIndicators 的支持(上拉加载动画)
    • 介绍移动屏幕焦点的 API 的使用(VoiceOver 相关)
    • 支持 Animated.loop
    • 改进 z-index 属性在 iOS 上的实现方式
    • 帮助 VoiceOver 提高对多行本文模式下的 TextInputs 的识别能力
    • 提供获取 iOS 推送消息 category 属性的方法
    • 在 Podfile 中添加关于 DevSupport 的备注
    • 最小化 UIViewOperationQueue 锁定时间
    • 在 XMLHttpRequest 和 Websocket 请求的头文件中添加 cookie
    • 使用更稳定的 drawViewHierarchyInRect 代替 renderInContext
    • 只有设置了 soundName 后才会在本地推送的通知送达时播放声音

    如果需要发送静默的本地通知,可以不设置 soundName 属性

    • 忽略 UIWebView 中提示的 "Frame load interrupted" 错误
    • 修复在编译时关于无用变量的警告

    三、Android


    修复 Bug

    • 修复在 AccessibilityInfoModule 中的内存泄露
    • 修复 Android 中 <TextInput> 组件的属性 onContentSizeChange 很少被回调的问题,基本上只在初始化后调用一次。
    • 修复 ImageLoader Mock 时报错的问题
    • 修复内存泄露问题

    当 ReactInstanceManager 调用 destroy 方法时ViewManagersPropertyCache、 ViewManagerPropertyUpdater 中静态变量没有及时释放,会导致内存泄露

    • 修复由可重复加载的 executor 引起的竞争条件
    • 在一般的 border 示例中避免使用 path

    新特性

    • 在 UIManager 中添加 viewIsDescendantOf ,检测某个组件是否继承自其他组件
    • 将缺少的 Java 文件添加到 RN fbjni sync
    • 允许 WebView 处理 about:blank
    • 修改 CatalystInstanceImpl.java 中的拼写错误
    • 在 ShakeDetector 和 DevSupportManagerImpl 可以设置触发抖动处理程序的最小抖动次数(默认为 1 )
    • 在 OSS 构建时不包括 JNI dep
    • 给 WebView 添加属性以支持第三方的 cookies
    • 如果当先已经在 UI 线程就不继续向该线程发送 UI 操作
    • 移动 {HashMap,ArrayList} 到 Readable{Map,Array}
    • 移除 ReactImageView.RoundedCornerPostprocessor 中的无用代码
    • 在测量时不要阻止 attaching ReactRootView

    本文为 Marno 翻译,个人公众号:aMarno,分享 RN 技术

    个人公众号【aMarno】分享RN技术和生活见闻。欢迎交流。

    0


  • 哪位用了? TextInput 被输入法遮挡的问题,解决了么?



  • @kingctan react-native-inputscrollview 试试这个组件



  • @kingctan 在 Android 里面,可以使用 AndroidManifest.xml 配置为使用 AdjustPad 为默认方法,iOS 里面需要使用官方或者第三方的组件。



  • Android下,TextInput无法输入换行符,ios正常。



  • @qinxianglin
    初始化的时候定义一个变量:

    // 为了修复android上多行textInput的bug
            this._latestSubmitEditing = 0;
    

    在render这样写输入框

    <TextInput
        maxLength={300}
        autoCapitalize={"none"}
        style={styles.textInput}
        // 关闭拼写自动修正
        autoCorrect={false}
        keyboardType={"default"}
        multiline={true}
        numberOfLines={10}
        value={reason}
        onChangeText={this._onReasonChanged}
        placeholder={"请输入请假事由(必填)"}
        placeholderTextColor={'#cbcbcb'}
        underlineColorAndroid={'transparent'}
        returnKeyType="default"
        blurOnSubmit={false}
        onSubmitEditing={e => {
            // 为了修复android上多行textInput中换行键不能换行的bug
            if (!utils.isIOS()) {
                const latestSubmitEditing = this._latestSubmitEditing;
                this._latestSubmitEditing = e.timeStamp;
                if (latestSubmitEditing && e.timeStamp - latestSubmitEditing < 300) return;
                const text = this.state.reason;
                if (!text.endsWith("\n")) {
                    this.setState({ reason: text + '\n' });
                }
            }
        }}
    />
    


  • 上面同学的方案不是最佳的,要支持在任意位置换行。可以看这个方案https://github.com/zhangwilling/react-native-multiline-textinput-fix


登录后回复