无法运行 React Native 官方示例答案

【问题标题】：Can't run React Native official example无法运行 React Native 官方示例
【发布时间】：2017-10-14 16:44:49
【问题描述】：

这是我从React's Native website 复制的代码，它应该呈现具有一些格式化功能的文本输入：

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '????').join(' ')}
        </Text>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

我正在使用create-react-native-app。

如果我跑步

npm run flow

显示很多错误：

我的问题是 - 我在这里做错了什么，还是 React 网站上的代码已经过时了？

App.js:7
  7:   constructor(props) {
                   ^^^^^ parameter `props`. Missing annotation

App.js:9
  9:     this.state = {text: ''};
                      ^^^^^^^^^^ object literal. This type is incompatible with
  6: export default class PizzaTranslator extends Component {
                                                  ^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?

App.js:18
 18:           onChangeText={(text) => this.setState({text})}
                                       ^^^^^^^^^^^^^^^^^^^^^ call of method `setState`
 18:           onChangeText={(text) => this.setState({text})}
                                                     ^^^^^^ property `text` of object literal. Property cannot be assigned on possibly undefined value
  6: export default class PizzaTranslator extends Component {
                                                  ^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?

App.js:21
 21:           {this.state.text.split(' ').map((word) => word && '????').join(' ')}
                           ^^^^ property `text`. Property cannot be accessed on possibly undefined value
 21:           {this.state.text.split(' ').map((word) => word && '????').join(' ')}
                ^^^^^^^^^^ undefined. Did you forget to declare type parameter `State` of identifier `Component`?


Found 4 errors


import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

export default class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <TextInput
          style={{height: 40}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />
        <Text style={{padding: 10, fontSize: 42}}>
          {this.state.text.split(' ').map((word) => word && '????').join(' ')}
        </Text>
      </View>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => PizzaTranslator);

【问题讨论】：

您可能需要根据流程语法进行更改，顺便说一句，您的项目根目录名称是什么
@JigarShah 目录名称是披萨。
如果没有要检查的流类型，为什么要运行 Flow？为什么还要对复制的示例代码运行类型检查器？只需跳过类型检查示例。这也不在说明中。如果您想学习最基本的知识，您应该坚持他们实际要求您执行的步骤。

标签： react-native flowtype create-react-native-app

【解决方案1】：

我猜 react-native 文档是在没有流注释的情况下编写的，目的是让不精通流的人更容易阅读。

【讨论】：

【解决方案2】：

在这种情况下，super(props) 似乎是不正确的。所以我改了

export default class PizzaTranslator extends Component

到

class PizzaTranslator extends Component

然后从export default class Main 调用它并且它正在工作。

【讨论】：