zenadmin
e24bdcffe5
- .npmrc pekar på Gitea npm-registret (http://100.75.227.121:3030/api/packages/zenblazer/npm/) - App.tsx importerar MotionProvider, CometTail (particles), HypnoticSpiral (hypnotic), MagneticButton (micro) i en GestureHandlerRootView - bevis/ innehåller enhetsgrindens skärmdumpar (rörelse, gest, reduced motion) från Xiaomi 11T Pro, namngivna med apk_md5 e2adae75d6f789293d6504357ac810c3
49 lines
2.0 KiB
TypeScript
49 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { SafeAreaView, ScrollView, StyleSheet, Text, View } from 'react-native';
|
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
|
import { MotionProvider } from '@zen/skia-motion';
|
|
import { CometTail } from '@zen/skia-motion/particles';
|
|
import { HypnoticSpiral } from '@zen/skia-motion/hypnotic';
|
|
import { MagneticButton } from '@zen/skia-motion/micro';
|
|
|
|
// Demo-konsument för wayfinder-biljett #72 (karta #57): ett främmande
|
|
// Expo SDK 57-projekt som installerar @zen/skia-motion från Gitea-registret
|
|
// och ritar tre komponenter ur tre olika sub-exports.
|
|
export default function App() {
|
|
return (
|
|
<GestureHandlerRootView style={styles.root}>
|
|
<MotionProvider>
|
|
<SafeAreaView style={styles.root}>
|
|
<ScrollView contentContainerStyle={styles.scroll}>
|
|
<Text style={styles.title}>@zen/skia-motion demo</Text>
|
|
|
|
<Text style={styles.label}>particles/CometTail — dra med fingret</Text>
|
|
<View style={styles.stage}>
|
|
<CometTail />
|
|
</View>
|
|
|
|
<Text style={styles.label}>hypnotic/HypnoticSpiral — håll för att strama åt</Text>
|
|
<View style={styles.stage}>
|
|
<HypnoticSpiral />
|
|
</View>
|
|
|
|
<Text style={styles.label}>micro/MagneticButton — dra knappen mot fingret</Text>
|
|
<View style={styles.stageSmall}>
|
|
<MagneticButton />
|
|
</View>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
</MotionProvider>
|
|
</GestureHandlerRootView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
root: { flex: 1, backgroundColor: '#0d0621' },
|
|
scroll: { padding: 16, gap: 12 },
|
|
title: { color: '#fff', fontSize: 20, fontWeight: '700', marginBottom: 8 },
|
|
label: { color: '#cbd5e1', fontSize: 14, marginTop: 16, marginBottom: 4 },
|
|
stage: { height: 260, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000' },
|
|
stageSmall: { height: 220, borderRadius: 12, overflow: 'hidden', backgroundColor: '#000' },
|
|
});
|