1.10.15.5. fejezet, Navigáció

Beküldte pzoli - 2023, január 16 - 8:47de

Kapcsolódó hivatkozások

Függőségek telepítése

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context
 
NavigationStack
 
npm install @react-navigation/stack
npm install @react-navigation/native-stack
npm install react-native-gesture-handler
npm install @react-native-masked-view/masked-view
 
Drawer
 
npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Android MainActivity kiegészítése

android/app/src/main/java//MainActivity.java

import android.os.Bundle; // !!! fontos !!!
...
public class MainActivity extends ReactActivity {
...
@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}
...

A react-native-reanimated (a Drawer függősége) használatánál fontos beállítani a babel.config.js tartalmát:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin']
};

Fontos hogy a plugins tömben mindig az utolsó legyen a react-native-reanimated/plugin.

Ezután fontos futtatni (VSCode bezárása után egy terminál ablakban a projekt könyvtárát megnyitva):

npm start -- --reset-cache

Paraméterek átadása

import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
 
import HomeScreen from './app/screens/HomeScreen';
import DetailsScreen from './app/screens/DetailsScreen';
import { store } from './app/data/SignalSorage';
 
import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
const Stack = createNativeStackNavigator();
 
const homeScreenListeners = ({ navigation, route }) => ({
  focus: async (e) => {
    console.log('HomeScreen focused.');
    await store.init();
    navigation.setParams({
      signals: store.SignalsArray,
    });
  }
})
 
const detailsListeners = ({ navigation, route }) => ({
  beforeRemove: (e) => {
    if (e.data.action.payload != undefined && e.data.action.payload.params != undefined && e.data.action.payload.params.saveItem) {
      const { title, uri, saveItem } = e.data?.action.payload.params;
      store.save({ key: store.getLastKey() + 1, title: title, uri: uri });
    }
  }
})
const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen name="HomeScreen" component={HomeScreen}
          initialParams={{ signals: [] }}
          listeners={homeScreenListeners}
        />
        <Stack.Screen name="Details" component={DetailsScreen}
          initialParams={{ saveItem: false }}
          listeners={detailsListeners}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
 
export default App;