const App: () => React$Node = () = 这个指令是什么意思？

Question

on react-native init ProjectName，主应用程序文件App.js以以下方式包含组件的声明：const App: () => React$Node = () => {...}这个指令是什么意思？我的意思是，我习惯于将组件定义为const App = () => {...}，所以我不明白，特别是 之间的表达式: () => React$Node。

Answer 1

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

ReactNode 是以下类型之一： ReactChild | ReactFragment | ReactPortal | boolean | null | undefined

这意味着函数 App 可以返回任何有效的 JSX（在 React Native 中，它来自 View、Text、.etc）、ReactFragment、React.Portal、boolean、null、undefined

如果您对美元符号感到困惑，这里有一个解释链接。 https://www.saltycrane.com/flow-type-cheat-sheet/latest/

名称中带有 $ 的“私有”或“魔法”类型有单独的部分。请参阅此处的注释并在此处发表评论。更新：现在这里记录了一些这些类型。

为简单起见，您可以将其视为Node来自React（将其视为范围/命名空间）

Answer 2

它也是一种将 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

    }

});

不要忘记在最后一行删除语句导出默认应用程序。

Answer 3

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

declare type React$Node =

  | null

  | boolean

  | number

  | string

  | React$Element<any>

  | React$Portal

  | Iterable<?React$Node>;