[英]react native : what is principle of stack navigation?
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.
但我有疑问。
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) .要在 react native 中实现堆栈导航,首先根据您的环境添加这些包https://reactnavigation.org/docs/getting-started (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.
这意味着,首先显示并导航到其他和其他屏幕的屏幕,通过按返回按钮,第一个屏幕将在最后显示。
In react-navigation, your component will not automatically be re-rendered.在 react-navigation 中,您的组件不会自动重新渲染。 See Refresh previous screen on goBack() for discussion on solutions to this issue in react-navigation.
有关 react-navigation 中此问题的解决方案的讨论,请参阅在 goBack() 上刷新上一个屏幕。
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?
您能否详细说明您正在寻找的反馈?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.