feat(app): Workspace-Umbau Schritt 1 — gesture-handler/reanimated/webview + Root-Wrapper
Fundament fuer den zoombaren Desktop-Workspace: - react-native-gesture-handler@2.14.1, react-native-reanimated@3.6.2, react-native-webview@13.6.4 (kompatibel mit RN 0.73.4 / Hermes / old-arch) - babel.config.js: reanimated/plugin als letztes Plugin - index.js: gesture-handler als allererster Import - App.tsx: GestureHandlerRootView um den gesamten Baum Hinweis: nach npm install einmalig `npm start --reset-cache` + nativer Rebuild (gradlew clean), sonst brechen die reanimated-Worklets still. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
+6
-2
@@ -8,6 +8,7 @@
|
|||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import { AppState, AppStateStatus, PermissionsAndroid, Platform, StatusBar, StyleSheet } from 'react-native';
|
import { AppState, AppStateStatus, PermissionsAndroid, Platform, StatusBar, StyleSheet } from 'react-native';
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||||
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
|
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
|
||||||
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
||||||
|
|
||||||
@@ -132,7 +133,7 @@ const App: React.FC = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<GestureHandlerRootView style={styles.root}>
|
||||||
<StatusBar barStyle="light-content" backgroundColor="#0D0D1A" />
|
<StatusBar barStyle="light-content" backgroundColor="#0D0D1A" />
|
||||||
<NavigationContainer theme={DarkTheme}>
|
<NavigationContainer theme={DarkTheme}>
|
||||||
<Tab.Navigator
|
<Tab.Navigator
|
||||||
@@ -180,13 +181,16 @@ const App: React.FC = () => {
|
|||||||
/>
|
/>
|
||||||
</Tab.Navigator>
|
</Tab.Navigator>
|
||||||
</NavigationContainer>
|
</NavigationContainer>
|
||||||
</>
|
</GestureHandlerRootView>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
// --- Styles ---
|
// --- Styles ---
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
|
root: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
header: {
|
header: {
|
||||||
backgroundColor: '#12122A',
|
backgroundColor: '#12122A',
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: ['module:metro-react-native-babel-preset'],
|
presets: ['module:metro-react-native-babel-preset'],
|
||||||
|
// react-native-reanimated/plugin MUSS das LETZTE Plugin sein (Worklet-Transform).
|
||||||
|
// Nach dem Hinzufuegen einmalig Metro-Cache leeren: `npm start --reset-cache`.
|
||||||
|
plugins: ['react-native-reanimated/plugin'],
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,3 +1,6 @@
|
|||||||
|
// react-native-gesture-handler MUSS als allererstes importiert werden
|
||||||
|
// (vor allem anderen), sonst crasht die Gesten-Erkennung auf Android.
|
||||||
|
import 'react-native-gesture-handler';
|
||||||
import { AppRegistry } from 'react-native';
|
import { AppRegistry } from 'react-native';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import { name as appName } from './app.json';
|
import { name as appName } from './app.json';
|
||||||
|
|||||||
@@ -20,12 +20,15 @@
|
|||||||
"react-native-camera-kit": "^13.0.0",
|
"react-native-camera-kit": "^13.0.0",
|
||||||
"react-native-document-picker": "^9.1.1",
|
"react-native-document-picker": "^9.1.1",
|
||||||
"react-native-fs": "^2.20.0",
|
"react-native-fs": "^2.20.0",
|
||||||
|
"react-native-gesture-handler": "2.14.1",
|
||||||
"react-native-image-picker": "^7.1.0",
|
"react-native-image-picker": "^7.1.0",
|
||||||
"react-native-permissions": "^4.1.4",
|
"react-native-permissions": "^4.1.4",
|
||||||
|
"react-native-reanimated": "3.6.2",
|
||||||
"react-native-safe-area-context": "^4.8.2",
|
"react-native-safe-area-context": "^4.8.2",
|
||||||
"react-native-screens": "3.27.0",
|
"react-native-screens": "3.27.0",
|
||||||
"react-native-sound": "^0.11.2",
|
"react-native-sound": "^0.11.2",
|
||||||
"react-native-svg": "^14.1.0"
|
"react-native-svg": "^14.1.0",
|
||||||
|
"react-native-webview": "13.6.4"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@react-native/eslint-config": "^0.73.2",
|
"@react-native/eslint-config": "^0.73.2",
|
||||||
|
|||||||
Reference in New Issue
Block a user