kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-05-08 07:53:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add some stall stuff as settings to native animated example

Browse Source 
Reviewed By: fkgozali

Differential Revision: D3817885

fbshipit-source-id: 047f806411982aafdf7420eebadff063f56fee69
This commit is contained in:
Spencer Ahrens
2016-09-06 19:45:08 -07:00
committed by Facebook Github Bot 8
parent 2618ba2d60
commit 322c160fb1
3 changed files with 120 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
Examples/UIExplorer/js/NativeAnimationsExample.js
View File

@@ -123,6 +123,52 @@ class ValueListenerExample extends React.Component {
}
}
const UIExplorerSettingSwitchRow = require('UIExplorerSettingSwitchRow');
class InternalSettings extends React.Component {
_stallInterval: ?number;
state: {busyTime: number | string, filteredStall: number};
render() {
return (
<View>
<UIExplorerSettingSwitchRow
initialValue={false}
label="Force JS Stalls"
onEnable={() => {
this._stallInterval = setInterval(() => {
const start = Date.now();
console.warn('burn CPU');
while ((Date.now() - start) < 100) {}
}, 300);
}}
onDisable={() => {
clearInterval(this._stallInterval || 0);
}}
/>
<UIExplorerSettingSwitchRow
initialValue={false}
label="Track JS Stalls"
onEnable={() => {
require('JSEventLoopWatchdog').install({thresholdMS: 25});
this.setState({busyTime: '<none>'});
require('JSEventLoopWatchdog').addHandler({
onStall: ({busyTime}) => this.setState((state) => ({
busyTime,
filteredStall: (state.filteredStall || 0) * 0.97 + busyTime * 0.03,
})),
});
}}
onDisable={() => {
console.warn('Cannot disable yet....');
}}
/>
{this.state && <Text>
JS Stall filtered: {Math.round(this.state.filteredStall)}, last: {this.state.busyTime}
</Text>}
</View>
);
}
}
const styles = StyleSheet.create({
row: {
padding: 10,
@@ -147,8 +193,7 @@ exports.examples = [
return (
<Tester
type="timing"
config={{ duration: 1000 }}
>
config={{ duration: 1000 }}>
{anim => (
<Animated.View
style={[
@@ -198,8 +243,7 @@ exports.examples = [
return (
<Tester
type="timing"
config={{ duration: 1000 }}
>
config={{ duration: 1000 }}>
{anim => (
<Animated.View
style={[
@@ -243,8 +287,7 @@ exports.examples = [
return (
<Tester
type="timing"
config={{ duration: 1000 }}
>
config={{ duration: 1000 }}>
{anim => (
<Animated.View
style={[
@@ -273,8 +316,7 @@ exports.examples = [
return (
<Tester
type="timing"
config={{ duration: 1000 }}
>
config={{ duration: 1000 }}>
{anim => (
<Animated.View
style={[
@@ -296,8 +338,7 @@ exports.examples = [
return (
<Tester
type="timing"
config={{ duration: 1000 }}
>
config={{ duration: 1000 }}>
{anim => (
<Animated.View
style={[
@@ -326,8 +367,7 @@ exports.examples = [
return (
<Tester
type="spring"
config={{ bounciness: 0 }}
>
config={{ bounciness: 0 }}>
{anim => (
<Animated.View
style={[
@@ -355,8 +395,7 @@ exports.examples = [
<Tester
type="decay"
config={{ velocity: 0.5 }}
reverseConfig={{ velocity: -0.5 }}
>
reverseConfig={{ velocity: -0.5 }}>
{anim => (
<Animated.View
style={[
@@ -383,4 +422,12 @@ exports.examples = [
);
},
},
{
title: 'Internal Settings',
render: function() {
return (
<InternalSettings />
);
},
},
];