react-navigation记录

因为目前只用到底部导航栏，所以先记这一种，后面用到其他的再加吧。

1. 分别执行命令yarn add @react-navigation/native yarn add @react-navigation/bottom-tabs yarn add @react-navigation/native-stack
2. 底部文件代码(BottomNav.js)

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();
import SealCutting from '../views/sealCutting/sealCutting'
import Printing from '../views/printing/printing'

function BottomNav() {
  return (
    <Tab.Navigator
      initialRouteName="SealCutting"
      screenOptions={{
        tabBarActiveTintColor: '#1398DD',
      }}
      tabBarPosition="top"//设置导航栏的位置，安卓和ios默认的不一样，我设置的没有效果
        sceneContainerStyle={{
            // paddingTop:3,
            // paddingBottom:3,
            // backgroundColor:'black'//设置整个页面容器背景颜色，不是底部导航栏的

        }}
    >
      <Tab.Screen
        name="SealCutting"
        component={SealCutting}
        options={{
          tabBarLabel: '纂刻查字',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="favorite" color={color} size={size} />
          ),
          tabBarLabelStyle:{//设置底部导航栏的字的样式
            // backgroundColor:"black",
          },
          tabBarLabelPosition:'below-icon',//设置字在图标的下面还是旁边，手机和平板默认的不一样
          headerShown:false//是否显示页面顶部的头，默认为true
        }}
      />
      <Tab.Screen
        name="Printing"//页面路由地址，其他页面跳转到当前页面的地址就是name
        component={Printing}
        options={{
          tabBarLabel: '印谱',//显示的字
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={30} />
          ),
          headerShown:false
        //   tabBarBadge: 3,//在导航栏的图标角上显示的徽标
        }}
      />
    </Tab.Navigator>
  );
}
export default BottomNav

3. 主文件中引入底部导航栏

import 'react-native-gesture-handler';
import React from 'react';
import {NativeBaseProvider, View} from 'native-base';
import { StyleSheet } from 'react-native';

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import SealCutting from './src/views/sealCutting/sealCutting';
import Printing from './src/views/printing/printing'

import BottomNav from './src/commponents/BottomNav'

const Stack = createNativeStackNavigator()
function App(){
  return (
    <NavigationContainer>
      <NativeBaseProvider>
        <View style={styles.container}>
          <BottomNav></BottomNav>
        </View>
      </NativeBaseProvider>
    </NavigationContainer>

  )
}

export default App

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: '100%',
    height: '100%',
    backgroundColor: '#fff'
  },
});

4. 这个时候导航栏可以使用，但是图标无效，所以要安装图标库，执行命令yarn add react-native-vector-icons,完成后执行react-native link react-native-vector-icons，如果成功的话在项目根目录下按照路径android/app/src/main/assets查找，会在assets文件夹里面找到fonts文件夹。
5. 在导航栏文件中引入
   import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

图标目录地址：https://oblador.github.io/react-native-vector-icons/
底部导航栏api：https://reactnavigation.org/docs/bottom-tab-navigator

键盘把导航栏顶上去解决方案：
根据路径/android/app/src/main找到main文件夹下的AndroidManifest.xml文件，把android:windowSoftInputMode的值修改为stateAlwaysHidden|adjustPan

写个底部导航栏花了好久时间，到现在才算有了雏形，还得再多学习再完善。