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

夏天
  • 36

截屏2020-02-20下午10.33.17.png

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

回复
阅读 4.3k
4 个回答
✓ 已被采纳

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

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

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

// 等价于

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

我不是很清楚这个的作用,不过他是有报错的
现在我的 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>  
    );  
  }  
}
陈晓旭
  • 2
新手上路,请多包涵

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

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

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

你知道吗?

宣传栏