const App：（）=> React $ Node =（）=> {…}：この命令はどういう意味ですか？

on react-native init ProjectNameでは、メインアプリファイルApp.jsに次のようにコンポーネントの宣言が含まれています。

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

この指示はどういう意味ですか？

const App = () => {...}つまり、として定義されたコンポーネントに慣れているので、特に間の表現がわかりません: () => React$Node。

javascript reactjs react-native

— マルコ
ソース

JSファイルでよろしいですか？タイプスクリプトのように見えます。

— Phix

@Phixフローを使用していると思います

— marco

ああ、理にかなっています。

— Phix

回答:

Flowからの型定義です。つまり、定数Appは関数型であり、ReactNodeを返します。

つまり、関数Appは、有効なJSX（ビュー、テキストなどからネイティブに反応する）、ReactFragment、React.Portal、ブール値、null、未定義を返すことができます。

ドル記号について混乱している場合は、ここに説明付きのリンクがあります。 https://www.saltycrane.com/flow-type-cheat-sheet/latest/

名前に$が含まれる「プライベート」または「マジック」タイプには、個別のセクションがあります。ここのメモを参照し、ここにコメントしてください。更新：これらのタイプのいくつかは、ここで文書化されています。

簡単のために、あなたはそのように考えることができますNodeからReact（スコープ/名前空間としてそれを考えます）

— ルカシュギボヴァイク
ソース

活字体は次のようになりReactNodeなし、$

— トマシュBłachut

サンプルのReact NativeはFlowを使用しているようです。しかし、フローに関するドキュメントが見つかりませんReact$Node。この点を明確にするのを手伝ってくれませんか？

— marco

わかりました@marco私の悪いフロー、typescriptではありませんが、私の回答で述べたように、Reactノードは基本的にレンダリングできる任意の要素であり、定義全体を回答に入れます。

— ルカシュ儀保VAIC

結構ですが、React$Node（ドル記号など）についてはまだ見逃しています。つまり、フロードキュメントでは、それについての言及はありません

— marco

@marcoがReactNodeが流れからではなく、答えを固定し、そのための唯一のフロー定義は、特定のタイプに反応

— ルカシュ儀保VAIC

React $ Nodeはreact.jsで定義されたタイプです

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

— Сантомас
ソース

これは、関数としての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を削除することを忘れないでください。

— テジュ
ソース