Question

我正在开发一个简单的React Native App，并决定使用反应导航。我还决定使用Flow进行静态类型检查。我无法弄清楚的是如何用Flow定义与导航相关的道具。

e.g。我将我的App.js定义为使用StackNavigator，如下所示：

import StackNavigator from 'react-navigation';
import Main from './app/containers/Main';

const App = StackNavigator({
  Main: { screen: Main },
});

export default App;

然后我定义了我的Main类，但我不知道如何在我的道具中引用react-navigation：

// @flow

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

type Props = {
  navigate: ????
};

type State = {};

class Main extends Component<Props, State> {
   ...
}

Answer 1

根据https://github.com/react-navigation/react-navigation/issues/3643

import { NavigationState, NavigationScreenProp } from 'react-navigation';

type Props = {
  navigation: NavigationScreenProp<NavigationState>
};

Answer 2

从options = { notification: {title: "Some Title", body: "Some description"}, data: {extra_data: {}}, priority: 'high' }导入NavigationScreenProp：

react-navigation

Answer 3

var n = "MPG_0099"; var r = n.replace(/(\d+)/, (match)=>("0".repeat(4)+(++match)).substr(-4)); console.log(r);有一个流文件。也许你可以从那里导入或只是复制粘贴

https://github.com/react-navigation/react-navigation/blob/master/flow/react-navigation.js#L72

Answer 4

为防止无法将类型NavigationState导入为值。请改用导入类型。

// @flow
import React, { Component } from 'react';
import type { NavigationState, NavigationScreenProp } from 'react-navigation';

type Props = {
    navigation: NavigationScreenProp<NavigationState>
}
type State = {}


class Main extends Component<Props, State> {
   ...
}

您还可以在.flowconfig中添加以下内容，以防止流类型化/npm/redux-devtools-extension_v2.x.x.js:23:33

[lints]
deprecated-utility=off

如何使用Flow定义反应导航的道具

4 个答案: