在同一页面中导航答案

【问题标题】：Navigation in the same page在同一页面中导航
【发布时间】：2021-03-26 14:55:16
【问题描述】：

import React, { Component, useState } from "react"; 
import {
  Content,
  List,
  ListItem,
  Left,
  Right,
  Icon,
  Container,
  Header,
  Body,
  Button,
  Title,
} from "native-base";
    
    
    //Page 1
        
        export function Food({ navigation }) {
                  return (
                    <Container>
                      <Header>
                        <Left>
                          <Button transparent onPress={() => navigation.goBack()}>
                            <Icon name="arrow-back" />
                          </Button>
                        </Left>
                        <Body>
                          <Title>Header</Title>
                        </Body>
                        <Right>
                          <Button transparent>
                            <Icon name="menu" />
                          </Button>
                        </Right>
                      </Header>
                    </Container>
                  );
                }
        
        //Page 2
            
            export class Diet extends Component {            
              render() {            
                return (
                  <View>
                            <TouchableOpacity
                              onPress={() => navigation.navigate("Food")}<---------
                            >
                              <Text>Food</Text>
                            </TouchableOpacity>
                </View>
            )} 
            export default Diet;

大家好，我是编程和 React Native 的新手，我正在尝试在两个不同的屏幕之间导航，两个屏幕都在同一页面上，我尝试使用 React Navigation 但它不起作用，而且我'我不确定我是否以正确的方式使用它。

【问题讨论】：

同一页面上的两个屏幕？什么意思？

标签： javascript reactjs react-native react-navigation

【解决方案1】：

import * as React from 'react'; import { Button, View, Text } from 'react-native';import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; const Stack = createStackNavigator();

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({ navigation }) {return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
  <Text>Details Screen</Text>
  <Button
    title="Go to Details... again"
    onPress={() => navigation.navigate('Home')}
  />
</View>);}

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

【讨论】：

【解决方案2】：

我建议使用 React Router 来创建一个单页应用，它们具有可在移动设备上运行的路由器类型

这里是 react native 的文档： React Router Native Quick Start

这是一个书面教程： React Native Router Tutorial

还有一个 youtube 教程： React Router Native Tutorial

【讨论】：