求问 react-native 新建项目后 const App: () => React$Node = () => 是什么意思

Question

才开始学习，请教下大家，十分感谢

Answer 1

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

把加粗的地方单独看就能明白了

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

// 等价于

// 定义一个类型，这个类型是一个返回React$Node的函数
type TypeApp = () => React$Node; 
// 声明一个 const 变量，类型是 TypeApp，值是一个箭头函数
const App: TypeApp = () => { /**/};

Answer 2

我不是很清楚这个的作用,不过他是有报错的
现在我的 rn 项目里也没有这个语法,是 0.60 以上的新语法?(因为我的项目还是 0.60 以下,不确定)
还有一个可能是你文件编码的原因,一般的命名里 $ 这个符号不大会在中间的

一般根据官网的流程走下来,我的初始化项目里 APP 这样的:

import React, {Component} from 'react';  
import {Platform, StyleSheet, Text, View} from 'react-native';  
  
const instructions = Platform.select({  
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',  
  android:  
  'Double tap R on your keyboard to reload,\n' +  
  'Shake or press menu button for dev menu',  
});  
  
type Props = {};  
export default class App extends Component<Props> {  
  render() {  
  return (  
     <View style={styles.container}>  
         <Text style={styles.welcome}>Welcome tos  React Native!</Text>  
         <Text style={styles.instructions}>To get started, edit App.js</Text> 
         <Text style={styles.instructions}>{instructions}</Text>  
     </View>  
    );  
  }  
}

Answer 3

flow定义的
https://stackoverflow.com/que...

Answer 4

这种语法
const App: () => React$Node = () => {
}

就相当于
class App extends React.Component {
render() {
}
}

新的写法省略了写rander方法，但VScode会报错，可以改成老的写法也没问题