React-Native堆栈导航

####1 安装 依赖

npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view
//原生导航
//堆栈导航
//底部导航
//顶部安卓导航

npm install 
react-native-reanimated
react-native-gesture-handler 
react-native-screens 
react-native-safe-area-context @react-native-community/masked-view

####2 创建一个堆栈导航器
createStackNavigator是一个返回包含2个属性的对象的函数：Screen和Navigator。它们都是用于配置导航器的React组件。的元素Navigator应Screen作为其子元素来定义路由的配置。

NavigationContainer是管理导航树并包含导航状态的组件。该组件必须包装所有导航器结构。通常，我们会在应用程序的根目录下渲染此组件，通常是从导出的组件App.js。

// In App.js in a new project

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

function HomeScreen() {
  return (
    <View style={
  { flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

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

export default App;

####3 配置导航器
所有路由配置都指定为导航器的道具。我们尚未将任何道具传递给导航器，因此它仅使用默认配置。

让我们向堆栈导航器添加第二个屏幕，并将该Home屏幕配置为首先呈现：

function DetailsScreen() {
  return (
    <View style={
  { flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

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