const App：（）=> React $ Node =（）=> {…}：这条指令是什么意思？

在上react-native init ProjectName，主应用程序文件App.js通过以下方式包含组件的声明：

const App: () => React$Node = () => {...}

该指令是什么意思？

我的意思是，我习惯于将组件定义为const App = () => {...}，所以我尤其不理解之间的表达: () => React$Node。

javascript reactjs react-native

— 马可
source

您确定这是JS文件吗？看起来像打字稿。

— 菲克斯

@Phix我认为它正在使用Flow

— marco

嗯，很有道理。

— 菲克斯

Answers:

它来自Flow的类型定义，这意味着常量App是函数类型，并且它返回ReactNode。

这意味着App可以返回任何有效的JSX函数（以本机的方式从View，Text，.etc中返回），ReactFragment，React.Portal，布尔值，null，未定义

如果您对美元符号感到困惑，请访问以下链接以获取解释。 https://www.saltycrane.com/flow-type-cheat-sheet/latest/

名称分别为$的“专用”或“魔术”类型有单独的部分。请参阅此处的注释，并在此处进行评论。更新：现在在这里记录了其中一些类型。

为了简单起见，您可以将其视为Node源于React（将其视为作用域/命名空间）

— 卢卡什·吉博·维克
source

打字稿是ReactNode，没有$

— TomaszBłachut19年

我发现样本React Native使用Flow。但是我在Flow中找不到关于的任何文档React$Node。您能帮我澄清一下吗？

— marco

好的@marco我不好，它的Flow，不是打字稿，但正如我在答案中提到的，React节点基本上是可以渲染的任何元素，都会将整个定义放入答案中。

— 卢卡斯·盖博VAIC

很好，但是我仍然想念有关React$Node（美元符号...）的信息，我的意思是，在Flow文档中没有任何引用

— marco

@marco固定答案，ReactNode不是来自流量，其流量只定义作出反应的具体类型

— 卢卡斯丽邦VAIC

React $ Node是react.js中定义的类型

declare type React$Node =
  | null
  | boolean
  | number
  | string
  | React$Element<any>
  | React$Portal
  | Iterable<?React$Node>;

— Сантомас
source

这也是将App组件声明为函数的一种类型，但是您可以将其更改为

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

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.instructions}>Hello World!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF'
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

不要忘了在最后一行删除语句Export default App。

— 手十
source