Fix guides docs to es2015 classes and remove flowtype from Animation example

Summary:
1. Animation guide page is the only place where Flowtype is used, it would be better to remove it to prevent some confusion.

2. ES2015 classes in guidelines docs pages and fixed some typos

**Test plan (required)**

Should i write any tests for this?
Closes https://github.com/facebook/react-native/pull/8339

Differential Revision: D3474192

Pulled By: bestander

fbshipit-source-id: 5531d1e399eaed0952732ac2e0bd1effc72d00a8
This commit is contained in:
Artyom Trityak 2016-06-22 18:51:17 -07:00 committed by Facebook Github Bot 5
parent 8feb1dc3b7
commit 590f90fe2e
3 changed files with 29 additions and 22 deletions

View File

@ -24,13 +24,13 @@ component with a simple spring bounce on mount looks like this:
```javascript
class Playground extends React.Component {
constructor(props: any) {
constructor(props) {
super(props);
this.state = {
bounceValue: new Animated.Value(0),
};
}
render(): ReactElement {
render() {
return (
<Animated.Image // Base: Image, Text, View
source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
@ -286,7 +286,7 @@ class App extends React.Component {
componentWillMount() {
// Animate creation
LayoutAnimation.spring();
},
}
_onPress() {
// Animate the update
@ -306,7 +306,7 @@ class App extends React.Component {
</View>
);
}
};
}
```
[Run this example](https://rnplay.org/apps/uaQrGQ)

View File

@ -32,7 +32,7 @@ uses `setNativeProps` internally to update the opacity of its child
component:
```javascript
setOpacityTo: function(value) {
setOpacityTo(value) {
// Redacted: animation related code
this.refs[CHILD_REF].setNativeProps({
opacity: value
@ -57,9 +57,10 @@ might implement it with that constraint is to store the opacity value
in the state, then update that value whenever `onPress` is fired:
```javascript
getInitialState() {
return { myButtonOpacity: 1, }
},
constructor(props) {
super(props);
this.state = { myButtonOpacity: 1, };
}
render() {
return (
@ -93,25 +94,25 @@ Composite components are not backed by a native view, so you cannot call
`setNativeProps` on them. Consider this example:
```javascript
var MyButton = React.createClass({
class MyButton extends React.Component {
render() {
return (
<View>
<Text>{this.props.label}</Text>
</View>
)
},
});
}
}
var App = React.createClass({
class App extends React.Component {
render() {
return (
<TouchableOpacity>
<MyButton label="Press me!" />
</TouchableOpacity>
)
},
});
}
}
```
[Run this example](https://rnplay.org/apps/JXkgmQ)
@ -132,10 +133,10 @@ that calls `setNativeProps` on the appropriate child with the given
arguments.
```javascript
var MyButton = React.createClass({
class MyButton extends React.Component {
setNativeProps(nativeProps) {
this._root.setNativeProps(nativeProps);
},
}
render() {
return (
@ -143,8 +144,8 @@ var MyButton = React.createClass({
<Text>{this.props.label}</Text>
</View>
)
},
});
}
}
```
[Run this example](https://rnplay.org/apps/YJxnEQ)
@ -172,10 +173,15 @@ necessary. For example, the following code demonstrates clearing the
input when you tap a button:
```javascript
var App = React.createClass({
class App extends React.Component {
constructor(props) {
super(props);
this.clearText = this.clearText.bind(this);
}
clearText() {
this._textInput.setNativeProps({text: ''});
},
}
render() {
return (
@ -188,7 +194,7 @@ var App = React.createClass({
</View>
);
}
});
}
```
[Run this example](https://rnplay.org/plays/pOI9bA)

View File

@ -148,7 +148,8 @@ The event name `topChange` maps to the `onChange` callback prop in JavaScript (m
// MyCustomView.js
class MyCustomView extends React.Component {
constructor() {
constructor(props) {
super(props);
this._onChange = this._onChange.bind(this);
}
_onChange(event: Event) {