Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native

exportiere const Stapel = [
  {
    Name: 'AllMovieScreen',
    Komponente: AllMovieScreen,
    Optionen: {headerShown: false},
  },
  {
    Name: 'CitySelectScreen',
    Komponente: CitySelectScreen,
    Optionen: {Titel: 'Wählen Sie eine Stadt'},
  },
  .... //Andere Routingseiten auslassen];

onst MainStack = createStackNavigator();

Funktion MainStackScreen({navigation}) {
  zurückkehren (
    <MainStack.Navigator
      initialRouteName="App"
      Bildschirmoptionen = {{
        headerTitleAlign: "Mitte",
        Header-Stil: {
          Schattenoffset: {Breite: 0, Höhe: 0},
          Schattenfarbe: '#E5E5E5',
          Hintergrundfarbe: '#fff',
        },
        Geste aktiviert: wahr,
        headerBackTitleVisible: false,
        headerLeft: () => (
          <Berührbare Opazität
            beim Drücken={() => navigation.goBack()}
            Stil={{padding: 10, paddingRight: 30}}>
            <Icon name="chevron-thin-left" size={20} color="#222222" />
          </TouchableOpacity>),
      }}>
      <Hauptstapel.Bildschirm
        name="App"
        Komponente={BottomTab}
        Optionen={{headerShown: false}}/>
      {stacks.map((Element, Index) => (
        <Hauptstapel.Bildschirm
          Schlüssel={index.toString()}
          Name={Artikelname}
          Komponente={item.component}
          Optionen={item.options}/>
      ))}
    </MainStack.Navigator>
  );
}

Standard-MainStackScreen exportieren;

npm installiere @react-navigation/bottom-tabs    

importiere {createBottomTabNavigator} aus '@react-navigation/bottom-tabs';
importiere {NavigationContainer} aus '@react-navigation/native';

: Const BottomTabs = createBottomTabNavigator();

exportiere Standardfunktion BottomTabScreen() {
  zurückkehren (
    <NavigationContainer>
      <BottomTabs.Navigator
        initialRouteName="Startseite"
        Bildschirmoptionen = {({route}) => ({
          tabBarIcon: ({fokussiert}) => {
            zurückkehren (
              <Bildquelle={ fokussiert? tabImage[`${route.name}_active`]
                    : tabImage[route.name]
                }
                Stil = {{Breite: 26, Höhe: 26}}/>
            ); }})}
        tabBarOptions={{
          activeTintColor: "Tomate",
          inactiveTintColor: "grau",
          Stil: {
            Hintergrundfarbe: '#fff',
          },
        }}>
        <BottomTabs.Bildschirm
          Name="Startseite"
          Komponente={HomeScreen}
          Optionen={{
            tabBarLabel: 'Film',
          }}/>
         
.... //Andere Codes weglassen <BottomTabs.Screen
          Name="Meins"
          Komponente={MineScreen}
          Optionen={{
            tabBarLabel: 'Mein',
          }}/>
      </BottomTabs.Navigator>
    </NavigationContainer>
  );
}

{
  Name: 'SelectorScreen',
  Komponente: SelectorScreen,
  Optionen: nav => {
    Um die Route zu berechnen, müssen Sie sie in der Liste der Routen angeben.
    const {params = {}} = Route;
    const {title = 'Aktivitätstyp', onRightPress = () => {}} = params;
    zurückkehren {
       Titel,
       headerRight: () => (
         <Berührbare Opazität
            beim Drücken={beimRechtsdrücken}
            Stil = {Stile.Button}>
            <Textstil={{Farbe: '#fff', Schriftgröße: 14}}>OK</Text>
         </TouchableOpacity>
        ),
      };
    },
  }

navigieren('SelectorScreen', {
      Werte: Kategorien.Map(c => c.andGroupName),
      Standardwerte: Kategoriename,
      beiBestätigung: Kategorie ändern,
    });

Funktion SelectorScreen({Navigation, Route}) {
  const {Werte = [], Standardwerte = [], bei Bestätigung} =route.params || {};
  const [ausgewählt, ausgewählt] = useState(Standardwerte);

  const _onRightPress = () => {
    beiBestätigung(ausgewählt);
    navigation.goBack();
  };

  useEffect(() => {
    navigation.setParams({onRightPress: _onRightPress});
  }, [ausgewählt]);

  const beiPressItem = val => {
    sei arr = [];
arr = [Wert];  
setSelected(arr);
  };

  const renderItem = ({item}) => {
    const renderRight = () => {
    const isSelected = ausgewählt.includes(Element);
    zurückkehren (
      <Listenelement
        text={item}
        renderRight={renderRight}
        beim Drücken = {() => beim Drücken des Elements (Element)} />
    );
  };

  zurückkehren (
    <Ansichtsstil={styles.bg}>
      <FlacheListe
        keyExtractor={(Element, Index) => Element + Index}
        Daten={Werte}
        renderItem={renderItem}
        ListFooterComponent={<Ansichtshöhe={120} />} />
    </Anzeigen>
  );
};

const Stile = StyleSheet.erstellen({
 .... // Lassen Sie den Stilcode weg });

Standard-SelectorScreen exportieren;

const {Werte = [], Standardwerte = [], bei Bestätigung} =route.params || {};

const _onRightPress = () => {
    onConfirm(selected); //onConfirm-Callback-Funktion gibt Daten zurück navigation.goBack();
 };