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:
parent
8feb1dc3b7
commit
590f90fe2e
|
@ -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)
|
||||
|
||||
|
|
|
@ -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)
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in New Issue