rn 导航栏stack navigation

(1)安装
	yarn add @react-navigation/native
	yarn add react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
	
(2)在最顶部导入
	import 'react-native-gesture-handler';

(3)导入导航栏容器
	import { NavigationContainer } from '@react-navigation/native';

(4)将整个导航内容包裹在在导航栏容器内
	export default function App() {
	  return (
	    <NavigationContainer>xxx</NavigationContainer>
	    );
	}
	
(5)使用stack navigation
	栈式导航,类似浏览器效果
	import { createStackNavigator } from '@react-navigation/stack';

(6)在render函数内或全局创建stack
      const Stack = createStackNavigator();
      
(7)引入路由组件,并设置默认路由

    <NavigationContainer>
    			//必须包裹在NavigationContainer内
    			
              <Stack.Navigator initialRouteName="默认路由name">
                  <Stack.Screen name="Home" component={函数式组件名/类组件名} options={{ title: '顶部名称,不写默认为name的值' }}/>
					...
              </Stack.Navigator>
              
          </NavigationContainer>
          
         其中:
         	Stack.Navigator属性
         		initialRouteName="默认路由name"
    
    (8)可通过将跳转按钮包裹在ScrollView内,实现可滑动的导航栏

代码示例:

import 'react-native-gesture-handler';
import React,{Component} from 'react'
import {Text,View,StyleSheet,Button,ScrollView} from 'react-native'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import A from './App21'


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

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

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



export default class App extends Component{
    render(){
        const Stack = createStackNavigator();
        return (
            <>
                <NavigationContainer>
                    <Stack.Navigator initialRouteName="Home">
                        <Stack.Screen name="Home" component={Home} options={{ title: 'Overview' }}/>
                        <Stack.Screen name="Details" component={DetailsScreen} />
                        <Stack.Screen name="New" component={New} />
                        <Stack.Screen name="A" component={A} />
                    </Stack.Navigator>
                </NavigationContainer>
                
            </>
    
        );
    }
  }