on react-native init ProjectName，主应用程序文件App.js以以下方式包含组件的声明：
const App: () => React$Node = () => {...}
这个指令是什么意思？
我的意思是，我习惯将组件定义为const App = () => {...}，所以我不明白，特别是 之间的表达: () => React$Node。
const App: () => React$Node = () => {...}: 这个指令是什么意思？
IT技术
javascript
reactjs
react-native
2021-04-26 10:45:47
3个回答
它的类型定义来自 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（将其视为范围/命名空间）
它也是一种将 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
}
});
不要忘记删除最后一行中的语句导出默认应用程序。
React$Node 是 react.js 中定义的类型
declare type React$Node =
| null
| boolean
| number
| string
| React$Element<any>
| React$Portal
| Iterable<?React$Node>;