不能运行 React Native官方例子
Can't run React Native official example
这是我从 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);
我猜测 react-native 文档是在没有流注释的情况下编写的,目的是让不精通流的人更容易阅读。
似乎 super(props)
在这种情况下是不正确的。所以我改变了
export default class PizzaTranslator extends Component
到
class PizzaTranslator extends Component
然后从 export default class Main
调用它并且它正在工作。
这是我从 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);
我猜测 react-native 文档是在没有流注释的情况下编写的,目的是让不精通流的人更容易阅读。
似乎 super(props)
在这种情况下是不正确的。所以我改变了
export default class PizzaTranslator extends Component
到
class PizzaTranslator extends Component
然后从 export default class Main
调用它并且它正在工作。