tired but i want to implement react native stack navigation.

import React, { useState } from "react";

const StackScreen = () => {
    let InitialRoute;
    let First;
    let Second;
    let Third;//assume they are screens of my app.
    const [stack, setStack] = useState([InitialRoute]);

    const replace = (screenName: any) => {
        const tmp: Array<any> = stack.filter((el: any) => el = !screenName);
        setStack([...stack, screenName]);
    }

    const navigate = (screenName: any) => {
        stack.indexOf(screenName) == -1 ? setStack([...stack, screenName]) : replace(screenName);
    }//navigate to another screen

    const goBack = () => {
        if (stack.length > 1) {
            const tmp = [...stack];
            tmp.pop();
            setStack(tmp);
        }
    }//they are fuctions.

    return stack[stack.length - 1];

}

const App = () => {
    return (
        <View>
            <Appbar />
            <StackScreen />
            <BottomTab or anything i dont want to render while change screens./>
        </View>
    )
}

i make toy example even if it's not accurate with reality. but i have question.

1. i enter the FirstScreen to SecondScreen. after a while, i pop the secondScreen.
   in this case, my code will re-render the FirstScreen.
   is the screen re-rendered in react - navigation?
   if ans is no, how to i implement without rendering?
2. what is problem of my idea?

CodePudding user response：

To Implement stack navigation in react native first add these packages https://reactnavigation.org/docs/getting-started according to your environment (EXPO CLI/React-native CLI) .
Stack Navigation Example

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>press back button to go back</Text>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Stack navigation Basic concept
Stack Navigation Mean first Screen In last out. it mean, that that screen which display first and navigate to other and other screen, by pressing back button that first screen will display in last.

CodePudding user response：

1. In react-navigation, your component will not automatically be re-rendered. See Refresh previous screen on goBack() for discussion on solutions to this issue in react-navigation.

2. This question is pretty general and I'm not sure how to answer. Can you give more detail on the feedback you're looking for?