27 篇博文 含有标签「announcement」

升级到新版 React Native 一直很困难。你可能以前见过这样的情况：

这些选项都不理想。覆盖文件的话，我们会丢失本地修改；不覆盖的话，则拿不到最新更新。

今天我很自豪地介绍一个帮助解决这个问题的新工具。该工具名为 react-native-git-upgrade，它在幕后使用 Git，尽可能自动解决冲突。

使用方法​

要求：Git 必须在 PATH 中可用。你的项目不必是用 Git 管理的。

全局安装 react-native-git-upgrade：

$ npm install -g react-native-git-upgrade

或者，使用 Yarn：

$ yarn global add react-native-git-upgrade

然后，在你的项目目录里运行它：

$ cd MyProject
$ react-native-git-upgrade 0.38.0

注意：不要运行 'npm install' 来安装新的 react-native 版本。该工具需要比较旧版本与新版本的项目模板才能正常工作。只需在你的应用文件夹里（仍在旧版本时）如上所示运行它即可。

示例输出：

你也可以不带参数执行 react-native-git-upgrade，它将升级到最新版 React Native。

我们会尝试保留你对 Android 和 iOS 构建文件的修改，因此升级后你不需要运行 react-native link。

该实现设计得尽可能低侵入，完全基于一个临时目录下即时创建的本地 Git 仓库。它不会干扰你的项目仓库（无论你用的是 Git、SVN、Mercurial 还是无版本控制）。出现意外错误时，源码会被还原。

它是如何工作的？​

关键步骤是生成一个 Git 补丁。该补丁包含你应用当前版本与新版本间，在 React Native 模板里的所有变更。

为了获取该补丁，我们需要用 node_modules 目录下 react-native 包中内嵌的模板生成应用（这就是 react-native init 使用的同样模板）。之后，在当前版本与新版本的模板分别生成原生应用后，Git 就可以生成一个适合你项目的补丁（比如包含你的应用名）：

[...]

diff --git a/ios/MyAwesomeApp/Info.plist b/ios/MyAwesomeApp/Info.plist
index e98ebb0..2fb6a11 100644
--- a/ios/MyAwesomeApp/Info.plist
+++ b/ios/MyAwesomeApp/Info.plist
@@ -45,7 +45,7 @@
        <dict>
            <key>localhost</key>
            <dict>
-               <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+               <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
[...]

接下来，我们只需将这个补丁应用到你的源码文件。旧的 react-native upgrade 会在遇到细微差异时向你询问，而 Git 则利用其三方合并算法自动合并大部分更改，并最终留下熟悉的冲突界定符：

    13B07F951A680F5B00A75B9A /* Release */ = {
      isa = XCBuildConfiguration;
      buildSettings = {
        ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
<<<<<<< ours
        CODE_SIGN_IDENTITY = "iPhone Developer";
        FRAMEWORK_SEARCH_PATHS = (
          "$(inherited)",
          "$(PROJECT_DIR)/HockeySDK.embeddedframework",
          "$(PROJECT_DIR)/HockeySDK-iOS/HockeySDK.embeddedframework",
        );
=======
        CURRENT_PROJECT_VERSION = 1;
>>>>>>> theirs
        HEADER_SEARCH_PATHS = (
          "$(inherited)",
          /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
          "$(SRCROOT)/../node_modules/react-native/React/**",
          "$(SRCROOT)/../node_modules/react-native-code-push/ios/CodePush/**",
        );

这些冲突一般很好处理。分界符 ours 代表“你的团队”，而 theirs 可视为“React Native 团队”。

为什么引入一个新的全局包？​

React Native 自带一个全局 CLI（react-native-cli 包），它将命令代理给内嵌在 node_modules/react-native/local-cli 目录下的本地 CLI。

如前所述，流程必须从你当前的 React Native 版本启动。如果把实现嵌入本地 CLI，你无法在旧版本 React Native 中享用新功能。举例来说，如果这套新升级代码只发布于 0.38.0，那你就无法从 0.29.2 升级到 0.38.0。

基于 Git 的升级大大提升开发者体验，并且要让所有人都能用得上非常重要。通过使用独立的全局安装包 react-native-git-upgrade，无论你的项目用哪个版本 React Native，今天都可以使用这套新代码。

另外原因是 Martin Konicek 最近的 Yeoman 淘汰。我们不希望为了评估旧模板进而生成补丁，再把 Yeoman 依赖重新带回 react-native 包。

试试看并提供反馈​

总结一句，尽情享用该功能，欢迎随时提出改进建议、报告问题，尤其是提交 Pull Request。每种环境和每个 React Native 项目都各不相同，我们需要你的反馈，让这个工具为更多人顺利工作。

感谢！​

特别感谢了不起的公司 Zenika 和 M6 Web（存档），没有他们这一切都不可能实现！

我们听到很多人反映，React Native 的工作内容非常多，跟踪进展可能会很困难。为了帮助大家了解正在进行的工作，我们现在发布了 React Native 路线图。大致来说，相关工作可以分为三个优先重点：

• 核心库。为最有用的组件和 API 添加更多功能。
• 稳定性。改进底层架构，减少 bug 并提升代码质量。
• 开发者体验。帮助 React Native 开发者能够更快开发。

如果你有觉得有价值的新功能建议，欢迎访问 Canny，在这里你可以建议新功能并讨论已有提案。

React Native 的新内容​

今天发布的 React Native 0.37 版本 引入了一个新的核心组件，让在任何应用中添加一个可点击按钮变得非常简单。我们还引入了对新包管理工具 Yarn 的支持，这将加速更新应用依赖的整个过程。

介绍 Button 组件​

今天我们推出了一个基础的 <Button /> 组件，在所有平台上都拥有良好的展示效果。这个新组件解决了我们收到的最常见反馈之一：React Native 是少数没有开箱即用按钮的移动开发工具之一。

<Button
  onPress={onPressMe}
  title="Press Me"
  accessibilityLabel="Learn more about this Simple Button"
/>

有经验的 React Native 开发者知道如何制作按钮：在 iOS 上用 TouchableOpacity 实现默认样式，在 Android 上用 TouchableNativeFeedback 实现水波纹效果，然后加上一些样式。自定义按钮的制作和安装并不特别难，但我们的目标是使 React Native 极其易学。将基础按钮加入核心组件后，初学者可以在第一天就开发出很棒的东西，而不必花时间格式化按钮或学习 Touchable 的细节。

Button 组件旨在在各个平台上都表现良好且原生化，但不会支持所有自定义按钮的复杂功能。这是一个很好的起点，但并不意味着要替代你已有的所有按钮。想了解更多，请查看带有可运行示例的 Button 新文档！

使用 Yarn 加快 react-native init​

你现在可以使用新 JavaScript 包管理器 Yarn 来显著加快 react-native init 的速度。想体验提升，请 安装 yarn 并将 react-native-cli 升级到 1.2.0：

$ npm install -g react-native-cli

设置新应用时，你应该可以看到 “Using yarn” ：

简单的本地测试中，react-native init 在良好的网络环境下大约耗时 1 分钟（而使用 npm 3.10.8 时大约需要 3 分钟）。安装 yarn 是可选的，但强烈推荐。

感谢！​

感谢所有为本次发布做出贡献的人。完整的 发布说明 已在 GitHub 上公开。拥有 24 个以上的 bug 修复和新功能，React Native 在大家的共同努力下持续变得更好。

今天我们发布了 React Native 0.36。请继续阅读，了解更多新内容。

无界面 JS（Headless JS）​

无界面 JS 是一种在应用处于后台时运行 JavaScript 任务的方式。例如，它可以用于同步最新数据、处理推送通知或播放音乐。目前仅在 Android 上可用。

开始使用时，在一个专用文件中定义你的异步任务（例如 SomeTaskName.js）：

module.exports = async taskData => {
  // 在这里执行你的任务。
};

接下来，在 AppRegistry 中注册你的任务：

AppRegistry.registerHeadlessTask('SomeTaskName', () =>
  require('SomeTaskName'),
);

使用无界面 JS 需要编写一些本地 Java 代码，以便在需要时启动服务。查看我们新的 无界面 JS 文档 了解更多内容！

键盘 API​

使用 Keyboard 操作屏幕键盘现在变得更简单。你可以监听原生键盘事件并做出响应。例如，要关闭当前活动的键盘，只需调用 Keyboard.dismiss()：

import {Keyboard} from 'react-native';

// 关闭键盘！
Keyboard.dismiss();

动画除法​

React Native 已经支持通过加法、乘法和取模来组合两个动画值。到了 0.36 版本，现已支持通过 除法 来组合两个动画值。有些情况下需要一个动画值反转另一个动画值进行计算，比如反转缩放比例（2 倍 --> 0.5 倍）：

const a = Animated.Value(1);
const b = Animated.divide(1, a);

Animated.spring(a, {
  toValue: 2,
}).start();

b 将随 a 的弹簧动画变化，生成值 1 / a。

基本用法如下：

<Animated.View style={{transform: [{scale: a}]}}>
  <Animated.Image style={{transform: [{scale: b}]}} />
<Animated.View>

在此示例中，内部图片不会被拉伸，因为父视图的缩放被抵消了。如果你想了解更多，可以查看动画指南。

深色状态栏​

为 StatusBar 新增了一个 barStyle 值：dark-content。有了这个新增值，你现在可以在 Android 和 iOS 上都使用 barStyle。行为如下：

• default：使用平台默认（iOS 上为浅色，Android 上为深色）。
• light-content：使用浅色状态栏，文字和图标为黑色。
• dark-content：使用深色状态栏，文字和图标为白色。

...以及更多​

以上只是 0.36 版本更新内容的部分示例。请查看 GitHub 上的发行说明 获取完整新特性、bug 修复和破坏性变更列表。

你可以通过在终端运行以下命令升级到 0.36：

$ npm install --save [email protected]
$ react-native upgrade

打造优秀的开发者体验，其中一部分是拥有优秀的文档。创建好的文档需要很多工作——理想的文档应当是简明、有用、准确、完整且令人愉悦的。最近我们根据大家的反馈努力提升文档质量，想和大家分享一些我们做出的改进。

行内示例​

当你学习一个新的库、新的编程语言或新框架时，会有一个美妙的时刻，你第一次写出一段代码，尝试运行，看它是否能工作……而且它 确实 能工作。你创造了一些真实的东西。我们希望把这种直接的体验融入到文档里。比如这样：

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class ScratchPad extends Component {
  render() {
    return (
      <View style={{flex: 1}}>
        <Text style={{fontSize: 30, flex: 1, textAlign: 'center'}}>
          这是不是很酷？
        </Text>
        <Text style={{fontSize: 100, flex: 1, textAlign: 'center'}}>
          👍
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('ScratchPad', () => ScratchPad);

我们认为这些行内示例，借助 react-native-web-player 模块，在 Devin Abbott 的帮助下实现，是学习 React Native 基础的绝佳方式，我们也已更新了面向新手的 React Native 入门教程，尽可能使用这些示例。去看看吧——如果你曾经好奇只修改一小段示例代码会发生什么，这是一种很棒的试验方式。另外，如果你开发的是面向开发者的工具，想在自己的网站上展示一个实时的 React Native 示例，react-native-web-player 能让这件事轻松实现。

核心的模拟引擎由 Nicolas Gallagher 的 react-native-web 项目提供，它让 React Native 组件如 Text 和 View 能在网页上显示。如果你对创建同时支持移动端与网页的体验感兴趣，代码共用大量代码库，可以查看 react-native-web。

更好的指南​

在 React Native 的某些部分，存在多种实现方式，我们收到反馈说可以给出更明确的指导。

我们新出了一个 导航指南，对比了不同方案，并给出使用建议——Navigator、NavigatorIOS、NavigationExperimental。中期来看，我们正在努力改进和整合这些接口。短期内，我们希望更好的指南能够让你更容易应对。

我们还新增了一个关于 处理触摸 的指南，解释了制作按钮类界面的基本知识，并简述了多种处理触摸事件的方式。

我们着力改进的另一个领域是 Flexbox。包括如何使用 Flexbox 处理布局 和如何控制 组件尺寸 的教程，还包括一个虽然不够炫酷但希望对你有用的 React Native 布局控制属性列表。

快速入门​

当你开始在机器上搭建 React Native 开发环境时，确实需要安装和配置许多东西。要把安装过程变得非常有趣和令人激动很难，但我们至少可以让它尽可能快速且无痛。

我们构建了一个 全新的快速入门流程，让你先选择开发操作系统和移动操作系统，集中提供所有的设置说明。我们还亲自体验了安装流程，确保一切顺利，且每个决策点都有明确推荐。经过对无辜的同事的测试，我们相信这是一次改进。

我们还完善了 将 React Native 集成到已有应用 的指南。很多大型应用，比如 Facebook 自身的应用，实际上部分使用 React Native 构建，部分使用传统开发工具。我们希望这份指南能帮助更多人采用这种应用开发方式。

我们需要你的帮助​

你的反馈让我们知道应当优先处理什么。我知道有些人看完这篇博客可能会想“更好的文档？哼，X 库的文档还是一团糟！”这非常好——我们需要这种热情。给我们反馈的最佳方式取决于反馈的类型。

如果你发现文档中有错误，比如描述不准确或代码无法运行，提交 Issue 是最直接的方式。标注“Documentation”标签，方便我们分配给对应人员。

如果不是具体的错误，而是文档内容本质上令人困惑，这就不太适合 GitHub Issue。相反，可以在 Canny 上发表你觉得哪部分文档需要改进。这有助于我们在写指南等更广泛工作中进行优先排序。

感谢你读到这里，也感谢你使用 React Native！

自从我们开源 React Native 已经一年了。一开始，这只是几个工程师的一个想法，如今已经成为一个被 Facebook 及其他产品团队广泛使用的框架。今天在 F8 大会上，我们宣布微软将 React Native 引入 Windows 生态系统，使开发者能够在 Windows PC、手机和 Xbox 上构建 React Native 应用。该项目还将提供开源工具和服务，比如 Visual Studio Code 的 React Native 扩展和 CodePush，帮助开发者在 Windows 平台上创建 React Native 应用。此外，三星 正在为其混合平台构建 React Native，这将赋能开发者为数以百万计的智能电视、移动设备和可穿戴设备开发应用。我们还发布了 Facebook SDK for React Native，让开发者更容易地将 Facebook 的社交功能（如登录、分享、应用分析和 Graph API）集成到他们的应用中。一年之内，React Native 改变了开发者在各大主流平台上的开发方式。

这一年是史诗般的旅程——但我们才刚刚开始。下面回顾一下自从我们开源以来，React Native 如何成长和演进，我们在此过程中遇到的一些挑战，以及展望未来的期望。

以上为摘录。请在 Facebook Code 阅读完整文章。

今年早些时候，我们推出了iOS 版 React Native。React Native 将开发者在网页端使用 React 时所熟悉的声明式自包含 UI 组件和快速开发周期带到了移动平台，同时保持了原生应用的速度、逼真度和使用感受。今天，我们很高兴地发布了 Android 版 React Native。

在 Facebook，我们已经在生产环境中使用 React Native 超过一年。几乎正好一年前，我们团队开始开发广告管理器应用。我们的目标是创建一款新应用，让数百万在 Facebook 上投放广告的用户能够随时管理账户并创建新广告。最终，这不仅是 Facebook 第一个完全基于 React Native 的应用，也是第一个跨平台应用。在这篇文章中，我们想与大家分享我们如何构建这款应用，React Native 如何帮助我们提速，以及我们所学到的经验教训。

以上为节选内容。请在Facebook Code阅读全文。

我们在两年前向世界介绍了React，此后它在 Facebook 内外都取得了令人瞩目的增长。如今，虽然没人被强制使用它，但 Facebook 上的新网页项目通常会以某种形式使用 React，并且它正在业界被广泛采用。工程师们每天选择使用 React，是因为它让他们能更多地专注于产品，而不是花费大量时间与框架“斗争”。不过，直到我们使用 React 开发了一段时间之后，才真正理解它为何如此强大。

React 强制我们将应用拆分为离散的组件，每个组件表示一个单独的视图。这些组件让我们更容易迭代产品，因为修改某一部分时无需在脑中保持整个系统的全貌。但更重要的是，React 用声明式的方式包装了 DOM 的变异式、命令式 API，这提升了抽象层次，简化了编程模型。我们的发现是，使用 React 开发时，代码更加可预测。这种可预测性让我们能更有信心快速迭代，也让应用变得更加可靠。此外，使用 React 构建应用不仅更易于扩展，我们还发现团队规模的扩展也更为便捷。

结合网页的快速迭代周期，我们用 React 构建了一些很棒的产品，包括 Facebook.com 的许多组件。此外，我们基于 React 构建了强大的 JavaScript 框架，比如 Relay，它能够大幅简化大规模数据获取。当然，网页只是故事的一部分。Facebook 还有广泛使用的 Android 和 iOS 应用，它们基于彼此独立且封闭的技术栈构建。在多个平台之上进行应用开发，使我们的工程组织分裂开来，但这只是移动原生应用开发难点之一。

以上为节选。请在Facebook Code阅读完整文章。