RNTester LayoutAnimation example: add more options
Summary: Add more options to the LayoutAnimation example so it's easier to test more features of LayoutAnimations. 1) Add an option to animate reordering of views 2) Make animations slower, so it's easier to see what's going on and easier to trigger race conditions 3) Add options to mutate without animation, to test interrupting existing animations Changelog: [Internal] Updated Catalyst RNTester LayoutAnimation example with additional options Reviewed By: mdvacca Differential Revision: D21050309 fbshipit-source-id: 1daba4fd487693c34a2d40eb39a68c7d03c24f93
This commit is contained in:
Родитель
56583c6845
Коммит
1ee8c0c2c0
|
@ -19,43 +19,124 @@ const {
|
|||
TouchableOpacity,
|
||||
} = require('react-native');
|
||||
|
||||
class AddRemoveExample extends React.Component<{...}, $FlowFixMeState> {
|
||||
type ExampleViewSpec = {|
|
||||
key: number,
|
||||
|};
|
||||
|
||||
type AddRemoveExampleState = {|
|
||||
views: Array<ExampleViewSpec>,
|
||||
nextKey: number,
|
||||
|};
|
||||
|
||||
function shuffleArray(array: Array<ExampleViewSpec>) {
|
||||
var currentIndex: number = array.length,
|
||||
temporaryValue: ExampleViewSpec,
|
||||
randomIndex: number;
|
||||
|
||||
// While there remain elements to shuffle...
|
||||
while (currentIndex !== 0) {
|
||||
// Pick a remaining element...
|
||||
randomIndex = Math.floor(Math.random() * currentIndex);
|
||||
currentIndex -= 1;
|
||||
|
||||
// And swap it with the current element.
|
||||
temporaryValue = array[currentIndex];
|
||||
array[currentIndex] = array[randomIndex];
|
||||
array[randomIndex] = temporaryValue;
|
||||
}
|
||||
|
||||
return array;
|
||||
}
|
||||
|
||||
class AddRemoveExample extends React.Component<{...}, AddRemoveExampleState> {
|
||||
state = {
|
||||
views: [],
|
||||
nextKey: 1,
|
||||
};
|
||||
|
||||
UNSAFE_componentWillUpdate() {
|
||||
LayoutAnimation.easeInEaseOut(args =>
|
||||
console.log('AddRemoveExample completed', args),
|
||||
configureNextAnimation() {
|
||||
LayoutAnimation.configureNext(
|
||||
{
|
||||
duration: 1000,
|
||||
create: {type: 'easeInEaseOut', property: 'opacity'},
|
||||
update: {type: 'easeInEaseOut', property: 'opacity'},
|
||||
delete: {type: 'easeInEaseOut', property: 'opacity'},
|
||||
},
|
||||
args => console.log('AddRemoveExample completed', args),
|
||||
);
|
||||
}
|
||||
|
||||
_onPressAddViewAnimated = () => {
|
||||
this.configureNextAnimation();
|
||||
this._onPressAddView();
|
||||
};
|
||||
|
||||
_onPressRemoveViewAnimated = () => {
|
||||
this.configureNextAnimation();
|
||||
this._onPressRemoveView();
|
||||
};
|
||||
|
||||
_onPressReorderViewsAnimated = () => {
|
||||
this.configureNextAnimation();
|
||||
this._onPressReorderViews();
|
||||
};
|
||||
|
||||
_onPressAddView = () => {
|
||||
this.setState(state => ({views: [...state.views, {}]}));
|
||||
this.setState(state => ({
|
||||
views: [...state.views, {key: state.nextKey}],
|
||||
nextKey: state.nextKey + 1,
|
||||
}));
|
||||
};
|
||||
|
||||
_onPressRemoveView = () => {
|
||||
this.setState(state => ({views: state.views.slice(0, -1)}));
|
||||
};
|
||||
|
||||
_onPressReorderViews = () => {
|
||||
this.setState(state => ({views: shuffleArray(state.views)}));
|
||||
};
|
||||
|
||||
render() {
|
||||
const views = this.state.views.map((view, i) => (
|
||||
<View key={i} style={styles.view}>
|
||||
<Text>{i}</Text>
|
||||
const views = this.state.views.map(({key}) => (
|
||||
<View
|
||||
key={key}
|
||||
style={styles.view}
|
||||
onLayout={evt => console.log('Box onLayout')}>
|
||||
<Text>{key}</Text>
|
||||
</View>
|
||||
));
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<TouchableOpacity onPress={this._onPressAddView}>
|
||||
<TouchableOpacity onPress={this._onPressAddViewAnimated}>
|
||||
<View style={styles.button}>
|
||||
<Text>Add view</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this._onPressRemoveView}>
|
||||
<TouchableOpacity onPress={this._onPressRemoveViewAnimated}>
|
||||
<View style={styles.button}>
|
||||
<Text>Remove view</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this._onPressReorderViewsAnimated}>
|
||||
<View style={styles.button}>
|
||||
<Text>Reorder Views</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this._onPressAddView}>
|
||||
<View style={styles.button}>
|
||||
<Text>Add view (no animation)</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this._onPressRemoveView}>
|
||||
<View style={styles.button}>
|
||||
<Text>Remove view (no animation)</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity onPress={this._onPressReorderViews}>
|
||||
<View style={styles.button}>
|
||||
<Text>Reorder Views (no animation)</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
<View style={styles.viewContainer}>{views}</View>
|
||||
</View>
|
||||
);
|
||||
|
@ -74,7 +155,11 @@ const BlueSquare = () => (
|
|||
</View>
|
||||
);
|
||||
|
||||
class CrossFadeExample extends React.Component<{...}, $FlowFixMeState> {
|
||||
type CrossFadeExampleState = {|
|
||||
toggled: boolean,
|
||||
|};
|
||||
|
||||
class CrossFadeExample extends React.Component<{...}, CrossFadeExampleState> {
|
||||
state = {
|
||||
toggled: false,
|
||||
};
|
||||
|
@ -102,7 +187,15 @@ class CrossFadeExample extends React.Component<{...}, $FlowFixMeState> {
|
|||
}
|
||||
}
|
||||
|
||||
class LayoutUpdateExample extends React.Component<{...}, $FlowFixMeState> {
|
||||
type LayoutUpdateExampleState = {|
|
||||
width: number,
|
||||
height: number,
|
||||
|};
|
||||
|
||||
class LayoutUpdateExample extends React.Component<
|
||||
{...},
|
||||
LayoutUpdateExampleState,
|
||||
> {
|
||||
state = {
|
||||
width: 200,
|
||||
height: 100,
|
||||
|
|
Загрузка…
Ссылка в новой задаче