Здравствуйте, я новичок в том, чтобы реагировать на нативную и особую навигацию. Я застрял на одной простой вещи, используйте навигатор вкладок и навигатор стека одновременно. Я могу использовать один за раз, но не оба одновременно. Я не полностью понял документ навигации по реакции. Вот что я делаю:
Мой навигационный файл: сначала мой стек Navigator:
const Stack = createStackNavigator()
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions = {{headerShown: false}}>
<Stack.Screen name = "Profile" component = {Profile}/>
<Stack.Screen name = "Home" component = {Home}/>
<Stack.Screen name = "MachinesList" component = {MachinesList}/>
<Stack.Screen name = "Size" component = {Size}/>
<Stack.Screen name = "Weight" component = {Weight}/>
</Stack.Navigator>
</NavigationContainer>
)
}
а затем мой навигатор вкладок:
const Tab = createBottomTabNavigator()
export function TabNavigator(){
return(
<Tab.Navigator>
<Tab.Screen name='Profile' component = {Profile}/>
<Tab.Screen name='Home' component = {Home}/>
<Tab.Screen name='MachinesList' component = {MachinesList}/>
</Tab.Navigator>
)
}
И вот как я пытаюсь поместить свою навигацию в свой App.js:
return (
<Provider store = {store}>
<MyStack />
</Provider>
Вам нужно добавить свой TabNavigator как Stack.Screen в Stack.Navigator.
const Stack = createStackNavigator()
export default function MyStack() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions = {{headerShown: false}}>
<Stack.Screen name = "Profile" component = {TabNavigator}/>
<Stack.Screen name = "Home" component = {Home}/>
<Stack.Screen name = "MachinesList" component = {MachinesList}/>
<Stack.Screen name = "Size" component = {Size}/>
<Stack.Screen name = "Weight" component = {Weight}/>
</Stack.Navigator>
</NavigationContainer>
)
}
Теперь вы можете видеть, что Profile Stack.Screen использует TabNavigator.
Вам необходимо определить, какие экраны расположены на каких вкладках. В настоящее время у вас есть три вкладки, содержащие экраны, расположенные в одном стеке.
Обычно это работает следующим образом.
n
n
стекиstacks
В вашем случае это выглядит следующим образом.
const Tab = createBottomTabNavigator()
export function TabNavigator() {
return (
<Tab.Navigator>
<Tab.Screen name='Profile' component = {ProfileStack}/>
<Tab.Screen name='Home' component = {HomeStack}/>
<Tab.Screen name='MachinesList' component = {MachineListStack}/>
</Tab.Navigator>
)
}
Тогда HomeStack
выглядит следующим образом.
const Stack = createStackNavigator()
const HomeStack = () => {
return (
<Stack.Navigator initialRoutName = "HomeScreen">
<Stack.Screen name = "HomeScreen" component = {HomeScreen} />
// all other screens located inside the stack of the tab Home
</Stack.Navigator>
)
}
Сделайте то же самое для всех остальных стеков. Теперь у вас есть три вкладки с тремя стеками. Вы можете вложить столько экранов в каждый стек, сколько захотите.
Затем в вашем основном приложении вы инициализируете файл TabNavigator
.
export default function App() {
return (
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
);
}
Спасибо за четкое объяснение, не до конца понял документ, но теперь все ясно!