Question

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

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

该指令是什么意思？

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

Answer 1

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

ReactNode是以下类型之一：snprintf(dest, 5, "%s", temporary)

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

如果您对美元符号感到困惑，请点击此处，获得解释链接。 https://www.saltycrane.com/flow-type-cheat-sheet/latest/

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

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
    }
});

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

Answer 3

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

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

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

3 个答案: