javascript - Flow - 来自 react-native/Libraries 的错误

Question

迁移到 Flow 0.101.0 后，我收到来自 react-native/Libraries 的这些新错误:

> npm run flow

> mobile-viewer@2.0.0-rn-059 flow /Users/dude/workspace/mobile-viewer/mobile-viewer
> flow src

Launching Flow server for /Users/dude/workspace/mobile-viewer/mobile-viewer
Spawned flow server (pid=32736)
Logs will go to /private/tmp/flow/zSUserszSdudezSworkspacezSmobile-viewerzSmobile-viewer.log
Monitor logs will go to /private/tmp/flow/zSUserszSdudezSworkspacezSmobile-viewerzSmobile-viewer.monitor_log
Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js:659:7

Cannot call this._scrollAnimatedValue.setOffset with this.props.contentInset ? this.props.contentInset.top : 0 bound to
offset because:
 • null or undefined [1] is incompatible with number [2].
 • undefined [1] is incompatible with number [2].

     node_modules/react-native/Libraries/Components/ScrollView/ScrollView.js
     656│       this.props.contentOffset ? this.props.contentOffset.y : 0,
     657│     );
     658│     this._scrollAnimatedValue.setOffset(
     659│       this.props.contentInset ? this.props.contentInset.top : 0,
     660│     );
     661│     this._stickyHeaderRefs = new Map();
     662│     this._headerLayoutYs = new Map();

     node_modules/react-native/Libraries/Animated/src/nodes/AnimatedValue.js
 [2] 120│   setOffset(offset: number): void {

     node_modules/react-native/Libraries/StyleSheet/EdgeInsetsPropType.js
 [1]  14│   top?: ?number,


Error ┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈ node_modules/react-native/Libraries/Lists/SectionList.js:337:28

Cannot assign ref to this._wrapperListRef because SectionBase [1] is incompatible with SectionT [1] in type argument
SectionT [2].

     node_modules/react-native/Libraries/Lists/SectionList.js
 [1]  73│     section: SectionT,
        :
     334│
     335│   _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
     336│   _captureRef = ref => {
     337│     this._wrapperListRef = ref;
     338│   };
     339│ }
     340│

     node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js
 [2] 134│ class VirtualizedSectionList<SectionT: SectionBase> extends React.PureComponent<



Found 3 errors
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! mobile-viewer@2.0.0-rn-059 flow: `flow src`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the mobile-viewer@2.0.0-rn-059 flow script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/dude/.npm/_logs/2019-06-18T16_00_13_029Z-debug.log

react-native 信息输出:

> react-native info
info 
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
      Memory: 606.79 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.4.0 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.0, 28.0.0, 28.0.1, 28.0.2, 28.0.3
        System Images: android-25 | Google APIs Intel x86 Atom, android-25 | Google Play Intel x86 Atom, android-26 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.8 => 0.59.8 
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7
      react-native-rename: 2.2.2

修复这些错误的最佳方法是什么？

Answer 1

您应该使用在模板配置中声明的相同版本的 with。

比如我们使用react-native@0.59，这个版本推荐使用flow 0.92.0

https://github.com/facebook/react-native/blob/c20070f10458d48d6ac1eaac49e681e932bfb9fd/template/_flowconfig#L68-L69

这是典型的 react-native 头痛!感谢核心团队)