论坛 - React Native中文社区

晴明

//引入 Loading页面 主页面 登录页等页面组件
constructor(props) {
    super(props);
    this.state = { 登录状态: 等待检查 };
}
componentDidMount() {
    this.检查登录();    // 比如调用asyncstorage
}
检查登录() {
    if(经过检查后是已登录状态) {
          this.setState({ 登录状态: 已登录 });
    }
    else {
          this.setState({ 登录状态: 未登录 });
    }
}
render() {
const { 登录状态 } = this.state;
switch(登录状态) {
     case 等待检查:
               return <Loading页面 />;
     case 已登录:
               return <主页面 />;
     case 未登录:
               return <登录页 />;
}
}

晴明

@laughing 不用考虑了，从0.18开始，rn的新项目默认模板已经全面转向ES6了

晴明

@dearMartlet 人家必然是写好了路径，你如果知道人家写在哪你就去哪改，不知道写在哪就自己去研究，既不知道也不研究那就照着别人的要求做，既不知道也不研究还不照着别人的要求做——你咋不上天呢

晴明

https://github.com/chirag04/react-native-in-app-utils

晴明

https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle

晴明

7月5日发布的0.56版本在windows下有bug不能正常运行（包括后发的0.56.1也不行）

可以使用更低（<=0.55）或者更高(>=0.57)的版本

晴明

原文地址

本站完整打包0.17版本下载(无需init新项目和科学上网)

高层变更

添加Android WebView
新的Alert API，同时支持iOS和Android
用js封装UIManager原生模块，以实现更好的抽象性
暴露一个全局变量navigator.product，用来判断当前js的运行环境是否是React Native。webpack的用户请注意，由于这一特性需要读取json文件，因此你可能需要用到json-loader
修复Windows 10上打包失败的问题
修复在Navigator中通过ref拿不到navigationBar的引用的问题
现在Babel支持for-of循环的转换了
修复了packager没有正确处理assetRoots参数的问题
修复了inspect无状态组件会引起崩溃的问题
在iOS和Android上添加了新的剪贴板组件。之前在iOS上叫做RCTPasteboard
修复了在windows上使用require("./image")的问题

Android

开源SwipeRefreshLayoutAndroid组件，可用于竖直方向手势刷新（例子）
JSC profiler现在可以指定文件输出
通过使用Android特定的elevation属性实现了视图阴影。但只能在Android 5.0+上使用。
现在图片支持onLoad系列事件
Android的单元测试代码现已开源
现在支持给FrescoModule传递ImagePipelineConfig，以改进Fresco的可配置性
现在开始实验性地支持LayoutAnimation，但暂时需要通过UIManager.setLayoutAnimationEnabledExperimental手动开启
修复了变换过(transformed)的视图会在原位置接受触控的问题
现在支持NetInfo
ToolbarAndroid现在支持从右到左的文字方向RTL (right-to-left)
Image现在添加了loadingIndicatorSrc属性，类似于iOS的defaultSource，用于在loading时先显示点加载提示
为ReactPropGroupAdded添加了double类型
为视图添加了rotateX和rotateY变换

iOS

修复TextInput中包含富文本时出现的一些诡异的滚动问题
SliderIOS现在可以使用自定义图片
MapView的标注现在可以使用自定义的颜色和图片
MapView现在支持折线段：你可以在两点间使用自定义的颜色和宽度来绘制线段
添加didSetProps回调，它会在你为视图设置props之后调用
修复了多行 TextInput的onFocus/onBlur事件
通过添加另一种实现修复了MapView在iOS 8中崩溃的问题
为ActionSheetIOS添加了excludedActivityTypes
为AlertIOS添加了secure-text和login-password的输入类型。同时修复了取消按钮的高光样式，以及OK/Cancel按钮对应的本地化表达
为多行TextInput添加了blurOnSubmit属性，它模拟了在单行文本框中按回车键的行为
修复了TextInput在iOS 8及更低版本系统中的一些问题
修复了嵌套ScrollView中的滚动问题
TabBarIOS现在可以以字符串的形式指定systemIcon
LinkingIOS现在支持通用链接
PickerIOS现在支持style属性，可以自定义字体大小、颜色和对齐方式
ActionSheetIOS的按钮现在可以指定tintColor

重大变更

RCTRootView的initialProperties属性已被移除
UIManager不再支持Scrollview
iOS的原生模块bridge.modules现已过时，请使用bridge.moduleClasses或bridge moduleForName/Class。这一变更是为了实现原生模块的懒加载(lazy-loading)，提升效率
PullToRefreshLayoutAndroid组件现已更名为PullToRefreshViewAndroid

晴明

@Lotheve 回退版本的话，npm install之后还需要执行npm upgrade并选择全部覆盖

晴明

因为这个问题的答案显而易见：官方没有这个组件（请找第三方 http://react.parts 或 http://github.com )

晴明

原文地址

从0.18开始，RN默认项目全面转向ES6，语法大变化，请参考此贴学习 http://bbs.reactnative.cn/topic/15/

如何升级现有项目的RN版本？

重大变更

在react-native中引用React的做法发生了变更（在当前版本老的做法会报错）：

之前

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

现在

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

具体哪些属于React，哪些属于React Native，可以参考这篇帖子（需要科学上网）。

我摘录如下：

"react":

Children
Component
PropTypes
createElement
cloneElement
isValidElement
createClass
createFactory
createMixin

"react-native":

hasReactNativeInitialized
findNodeHandle
render
unmountComponentAtNode
unmountComponentAtNodeAndRemoveContainer
unstable_batchedUpdates
View
Text
ListView
...
以及其他所有的原生组件。

Breaking changes

General

Kill NavigationReducers (<tt>3a8b50a</tt>) - @hedgerwang
NavigationExperimental - Clean up NavigationStateUtils (<tt>67002e8</tt>) - @hedgerwang
```
*   Remove the logic that lets NavigationStateUtils accept empty value as input and return a new state.
```
- Remove the method NavigationStateUtils.getParent, NavigationStateUtils.set.
NavigationExperimental - Remove prop onNavigate (<tt>fb0007d</tt>) - @hedgerwang

Android

Add ReactInstanceHolder (<tt>49f20f4</tt>) - @foghina

Migration instructions

1.  Create a new file `MainApplication.java` in the same folder as `MainActivity.java`

    2.  Update it to match - [https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainApplication.java](https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainApplication.java) and move your customisations from `MainActivity.java` to this file
3.  Update `MainActivity.java` to match - [https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainActivity.java](https://github.com/facebook/react-native/blob/0.29-stable/local-cli/generator-android/templates/package/MainActivity.java)

    4.  Add `android:name=".MainApplication"` in the `&lt;application /&gt;` section of `AndroidManifest.xml`. It should now look like,

<div class="highlight highlight-source-diff"><pre>&lt;application

<span class="pl-mi1">+ android:name=".MainApplication"</span>
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme"></pre></div>

The experience might vary according to the level of customization you've made. Check this commit to see how UIExplorer and MoviesApp were migrated - [<tt>dcc2abc</tt>](https://github.com/facebook/react-native/commit/dcc2abc1f63f91e53bf01f4bc56c5b7c76300617)

Remove support for password property and only use secureTextEntry (<tt>f3507f9</tt>) - @dmmiller
Remove the Profiler Option in RN Android Dev Menu (<tt>4b19db3</tt>) - @lebronJ

iOS

Automatically clip subviews when removeClippedSubviews prop is used (<tt>1048e5d</tt>) - @nicklockwood
Remove deprecated methods from StatusBarIOS (<tt>4de616b</tt>) - @javache

General

Bug fixes

Fix left button moving in instead of fading in in NavigationBar (<tt>8731494</tt>) - @dragonwong
Fix incorrect import reference for emptyFunction in SwipeableListView (<tt>2fd537c</tt>) - @glawson
Fix onLayout support in <TextInput> (<tt>92926f9</tt>) - @paulshen
Don't clobber user-defined environment variables (<tt>402e7ea</tt>) - @vkarpov15
Fix polyfillLazyGlobal to work with allowTopLevelThis = false (<tt>f9e26b3</tt>) - @janicduplessis

New features and enhancements

Show stacktrace in YellowBox (<tt>8d03857</tt>) - @skv-headless
Add StyleSheet.absoluteFill convenience constant (<tt>e79f5d7</tt>) - @sahrens
Changed version of React dependency to ~ (<tt>592d5fb</tt>) - @bestander
Open sourced KeyboardAvoidingView (<tt>8b78846</tt>) - @nicklockwood
Allow CameraRoll to export videos (<tt>7357ccc</tt>) - @corbt
Clear Debug Console on Reload JS (<tt>b03a725</tt>) - @yungsters
Make InteractionManager tasks cancellable (<tt>be09ccc</tt>) - @sahrens
Add support for reverse flex directions on Android and iOS (<tt>d43e0db</tt>) - @feichngr
Add support for lineBreakMode prop on <Text> (<tt>c03b166</tt>) - @skv-headless
Fix an issue where scrollview wouldn't unclip its cells (<tt>1fcd73f</tt>) - @majak
Make module IDs deterministic when bundling (<tt>62bb09d</tt>) - @davidaurelio

Android

Bug fixes

Enable Double R shortcut to reload JS when redbox is shown (<tt>4959b21</tt>) - @lebronJ
Fix deletion layout animations to work with custom view managers (<tt>49a5fe4</tt>) - @astreet
Fix crash when Modal is displayed as a result of touch handling code (<tt>837aafd</tt>) - Olivier Notteghem
Properly validate layout animation config (<tt>d4e7c8a</tt>) - @janicduplessis
Fix potential NPE in layout animation deletion code (<tt>bb9ed2d</tt>) - Olivier Notteghem
Fix bug where UIOperations aren't executed after hosting Activity is paused (<tt>eef03fd</tt>) - @astreet
Remove iOS platform check for running devtools (<tt>1b40db7</tt>) - @kageurufu
Fix dialogmodule crashing with no fragment manager in onHostResume (<tt>bf79352</tt>) - @foghina

New features and enhancements

Open source permissions module (<tt>b7352b4</tt>) - @andreicoman11

iOS

Bug fixes

Fixed bug where layoutSubviews was called continuously for scrollview (<tt>329c716</tt>) - @nicklockwood
Explicitly set default background color in RCTTextView (<tt>1fce891</tt>) - @bnham
Fixed MapView's draggable annotation (<tt>993a928</tt>) - @nathanajah
Handle the case where redirect URL is relative (<tt>39eca05</tt>) - @maartenschumacher
Fix unbale to scroll in image cropper (<tt>13dfb62</tt>) - Wenjing Wang
Correctly passes localNotification to app on wakeup (<tt>57d4523</tt>) - @corbt

New features and enhancements

Add getScheduledLocalNotifications (<tt>5b4b027</tt>) - @joshuapinter
Implement CSS z-index for iOS (<tt>d64368b</tt>) - @nicklockwood
Add support for native animations on iOS (<tt>19e2388</tt>) - @buba447* Prevent images from flickering when component is reloaded (<tt>c8f39c3</tt>) - @nicklockwood* Implemented automatic IP detection for iOS (<tt>8c29a52</tt>) - @nathanajah
Support {min,max}{Width,Height} on RCTView (<tt>78b8929</tt>) - @javache

晴明

全局安装非可执行的模块完全没有意义，还可能引起一些错误
只有可执行的命令行工具才考虑全局安装，而目前也都倾向于

图方便用npx直接执行命令，不用安装到全局
或是在项目目录内安装后用yarn/npm调用本项目内的版本（毕竟很可能不同项目需要不同版本的命令行工具）

晴明

打个比方，纯RN是毛坯房，expo是按西方习惯的精装房，如果精装房不符合需求需要推倒重来，那可不是比毛坯房更麻烦

晴明

页面是一个栈结构，跳到新页面，原页面被新页面盖住，但仍然在，不会被unmount，否则你怎么返回上一个页面呢？
此时应该关注的是当前页面是否获得焦点（focus），而不是mount与否

晴明

比如微信啊，微博啊，支付啊，国内地图啊，推送啊，这都需要原生组件，而这些expo都没有

晴明

国内常用的组件都没有啊

晴明

create-react-native-app 早就废弃并迁移到expo-cli了
即便如此，这个也不适合在国内使用
而且不管你用哪个，都是用vscode开发啊

晴明

主流是vscode

晴明

你可以用chrome或者safari直接进入webview检查具体元素和网络请求的，首先应该排除是不是缓存的问题，改随机数不应该还有缓存，如果此时样式仍然不符合预期，那么应该检查样式到底写对了没（比如是否有不同的media query等等）

晴明

可以尝试给url加随机参数

晴明

fb的开源做法跟我们的理解有很大偏差
他只管开源他自己感兴趣的部分，而且并不完整（他们有独立的一套不开源的运行方案），至于怎么把开源版的项目跑起来，完全由社区来义务支持
这样有非常明显的好处当然也有非常明显的坏处
好处是，它并不在意外界评价，不是一个kpi项目，而是确确实实运行在fb的产品中，经受实际的检验（fb是直接在master上运行，都没有我们的版本的概念，所以是身先士卒在排雷）。它关注的是核心的性能和稳定性等底层问题，可以说是把精力用在“刀刃”上。
坏处是，FB所用的RN的工程结构和开源不一致，不关心它用不到的部分（windows支持，命令行支持，ui组件封装等等）。所以外界会碰到很多fb没碰到也没想过的问题，而这些问题完全靠社区自己解决。

晴明

@晴明

Best posts made by 晴明

高层变更

Android

iOS

重大变更

重大变更

"react":

"react-native":

Breaking changes

General

Android

iOS

General

Bug fixes

New features and enhancements

Android

Bug fixes

New features and enhancements

iOS

Bug fixes

New features and enhancements

Latest posts made by 晴明