You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.7 KiB
51 lines
1.7 KiB
import { View } from 'react-native';
|
|
import { useCounterDispatch, useCounterState } from '../stores/CounterStore';
|
|
import { styles } from '../src/theme';
|
|
import { Button, Card, Text } from 'react-native-paper';
|
|
import { HStack, VStack } from '../components/stack';
|
|
import { useBounce } from '../src/animation/useBounce';
|
|
import Animated from 'react-native-reanimated';
|
|
|
|
export default function TestPage() {
|
|
const state = useCounterState();
|
|
const dispatch = useCounterDispatch();
|
|
|
|
const { style: bounceStyle, trigger: bounce } = useBounce({ amplitude: 16, duration: 200 });
|
|
|
|
return (
|
|
<View style={styles.flexCenter}>
|
|
<Card mode="outlined" style={{ width: '80%' }}>
|
|
<Card.Title title={`Count: ${state.count}`} />
|
|
<Card.Content>
|
|
<VStack gap={12}>
|
|
<HStack justify="space-between">
|
|
<Text variant="bodyMedium" style={{ color: '#0000FF' }}>
|
|
Text1
|
|
</Text>
|
|
<Text variant="bodyMedium" style={{ color: '#FF0000' }}>
|
|
Text2
|
|
</Text>
|
|
</HStack>
|
|
<Animated.View style={bounceStyle}>
|
|
<Button
|
|
mode="outlined"
|
|
onPress={() => {
|
|
bounce();
|
|
}}>
|
|
🍞Action!
|
|
</Button>
|
|
</Animated.View>
|
|
<HStack justify="space-between">
|
|
<Button mode="contained" onPress={() => dispatch({ type: 'INCREMENT' })}>
|
|
+
|
|
</Button>
|
|
<Button mode="contained" onPress={() => dispatch({ type: 'DECREMENT' })}>
|
|
-
|
|
</Button>
|
|
</HStack>
|
|
</VStack>
|
|
</Card.Content>
|
|
</Card>
|
|
</View>
|
|
);
|
|
}
|
|
|