(2020)React Native入门-React Navigation 5.x+react-native-vector-icons+夜间模式

知识点GET

1. React Navigation 5.x安装
2. react-native-vector-icons安装与配置
3. React Navigation传参和跳转
4. 夜间模式的支持演示

视频教程

详细了解可以看我录的视频：

https://www.bilibili.com/video/BV1VV411m74Z/

 

实现效果

普通模式

夜间模式

新建RN项目

npx react-native init NavigationDemo

换国内清华大学的提高速度（非必须）

ios/Podfile文件头部增加下面

source 'https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git'

 文档

https://reactnavigation.org/

npm install

核心模块

npm install @react-navigation/native

相关依赖 

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

StackNavigator 

npm install @react-navigation/stack

BottomTabNavigator 

npm install @react-navigation/bottom-tabs

yarn install 

核心模块

yarn add @react-navigation/native

相关依赖  

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

StackNavigator  

yarn add @react-navigation/stack

BottomTabNavigator  

yarn add @react-navigation/bottom-tabs

 

安装react-native-vector-icons组件

这个组件中有很多有用的图标，先安装一下，后面会用到。

npm install react-native-vector-icons --save

或yarn安装 

yarn add react-native-vector-icons

 

IOS配置

修改/NavigationDemo/ios/NavigationDemo/Info.plist配置文件，增加一些配置：

UIAppFonts
  
    AntDesign.ttf
    Entypo.ttf
    EvilIcons.ttf
    Feather.ttf
    FontAwesome.ttf
    FontAwesome5_Brands.ttf
    FontAwesome5_Regular.ttf
    FontAwesome5_Solid.ttf
    Foundation.ttf
    Ionicons.ttf
    MaterialIcons.ttf
    MaterialCommunityIcons.ttf
    SimpleLineIcons.ttf
    Octicons.ttf
    Zocial.ttf
    Fontisto.ttf
  

android配置

NavigationDemo/android/app/build.gradle

修改这个配置文件，增加以下配置

project.ext.vectoricons = [
        iconFontNames: ['AntDesign.ttf',
                        'Entypo.ttf',
                        'EvilIcons.ttf',
                        'Feather.ttf',
                        'FontAwesome.ttf',
                        'FontAwesome5_Brands.ttf',
                        'FontAwesome5_Regular.ttf',
                        'FontAwesome5_Solid.ttf',
                        'Foundation.ttf',
                        'Ionicons.ttf',
                        'MaterialIcons.ttf',
                        'MaterialCommunityIcons.ttf',
                        'SimpleLineIcons.ttf',
                        'Octicons.ttf',
                        'Zocial.ttf',
                        'Fontisto.ttf'] // Name of the font files you want to copy
]

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

pod install

npx pod-install

代码实现 根部导航器

js/navigation/index.js

/* eslint-disable prettier/prettier */
import * as React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import TabNav from './TabNav';
import LoginScreen from '../screen/LoginScreen';
import DetailScreen from '../screen/DetailScreen';

const Stack = createStackNavigator();

function App() {
    return (
        
            {title: '登录', headerShown: false}}
            /
            {title: '首页', headerShown: false}}
            /

             ({
                    title: route.params.screenName,
                })}
            />
        
    );
}

export default App;

底部TAB导航配置

js/navigation/TabNav.js

import * as React from 'react';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import SchoolScreen from '../screen/SchoolScreen';
import HomeScreen from '../screen/HomeScreen';
import MessageScreen from '../screen/MessageScreen';
import SettingsScreen from '../screen/SettingsScreen';
import AntDesign from 'react-native-vector-icons/AntDesign';

export default function Navigation({colorScheme}) {
  return (
     ({
        tabBarIcon: ({focused, color, size}) => {
          if (route.name === 'index') {
            return ;
          } else if (route.name === 'school') {
            return ;
          } else if (route.name === 'message') {
            return ;
          } else if (route.name === 'setting') {
            return ;
          }
        },
      })}>
      {title: '首页', headerMode: 'none'}}
      /
      {title: '校园'}}
      /
      {title: '消息'}}
      /

      {title: '设置'}}
      /
    
  );
}
const Tab = createBottomTabNavigator();
const TabStack = createStackNavigator();

function SchoolNavigator() {
  return (
    
      {
          headerTitle: '校园',
          headerLeft: null,
          headerTitleAlign: 'center',
        }}
      /
    
  );
}

function MessageNavigator() {
  return (
    
      {
          headerTitle: '消息',
          headerLeft: null,
          headerTitleAlign: 'center',
        }}
      /
    
  );
}

function SettingsScreenNavigator() {
  return (
    
      {
          headerTitle: '我是设置标题',
          headerLeft: null,
          headerTitleAlign: 'center',
        }}
      /
    
  );
}

暗黑主题组件封装

/js/components/Themed.js

import * as React from 'react';
import {
  Text as DefaultText,
  View as DefaultView,
  useColorScheme,
} from 'react-native';

import Colors from '../constants/Colors';

/**
 * 自定义hook
 * @param props
 * @param colorName
 */
export function useThemeColor(props, colorName) {
  const theme = useColorScheme();
  const colorFromProps = props[theme];

  if (colorFromProps) {
    return colorFromProps;
  } else {
    return Colors[theme][colorName];
  }
}

/**
 * 自定义Text组件，使其自动适配暗黑模式
 * @param props 参数
 * @returns {*}
 * @constructor
 */
export function Text(props) {
  const {style, lightColor, darkColor, ...otherProps} = props;
  //使用hook获取当前的主题颜色
  const color = useThemeColor({light: lightColor, dark: darkColor}, 'text');
  //设置前景色
  return ;
}

export function View(props) {
  const {style, lightColor, darkColor, ...otherProps} = props;
  const backgroundColor = useThemeColor(
    {light: lightColor, dark: darkColor},
    'background',
  );

  //设置背景色
  return ;
}

主题颜色配置常量

js/constants/Colors.js

const tintColorLight = '#2f95dc';
const tintColorDark = '#fff';

export default {
  light: {
    text: '#000',
    background: '#fff',
    tint: tintColorLight,
    tabIconDefault: '#ccc',
    tabIconSelected: tintColorLight,
  },
  dark: {
    text: '#fff',
    background: '#000',
    tint: tintColorDark,
    tabIconDefault: '#ccc',
    tabIconSelected: tintColorDark,
  },
};

登录页代码

js/screen/LoginScreen.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {Button} from 'react-native';
import {
    Text,
    View,
} from '../components/Themed';

const LoginScreen = ({navigation})=> {
    return (
        { flex: 1, alignItems: 'center', justifyContent: 'center' }}
            登录页面
            {
                navigation.navigate('TabNav');
            }} />
        
    );
};

export default LoginScreen;

首页

js/screen/HomeScreen.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {
    Text,
    View,
} from '../components/Themed';

const HomeScreen = ()=> {
    return (
        { flex: 1, alignItems: 'center', justifyContent: 'center' }}
            首页
        
    );
};

export default HomeScreen;

消息

js/screen/MessageScreen.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {
    Text,
    View,
} from '../components/Themed';

const MessageScreen = ()=> {
    return (
        { flex: 1, alignItems: 'center', justifyContent: 'center' }}
            消息
        
    );
};

export default MessageScreen;

校园

js/screen/SchoolScreen.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {
    Text,
    View,
} from '../components/Themed';

const SchoolScreen = ()=> {
    return (
        { flex: 1, alignItems: 'center', justifyContent: 'center' }}
            校园
        
    );
};

export default SchoolScreen;

设置

js/screen/SettingsScreen.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {
    Text,
    View,
} from '../components/Themed';
import {Button} from 'react-native';

const SettingsScreen = ({navigation})=> {
  return (
      { flex: 1, alignItems: 'center', justifyContent: 'center' }}
        设置
          {
              navigation.navigate('LoginScreen');
          }} />

          {
              navigation.navigate('DetailScreen',{
                  screenName: '自定义标题',
                  url: 'http://www.baidu.com',
              });
          }} />
      
  );
};

export default SettingsScreen;

详情页面

js/screen/DetailScreen.js

/* eslint-disable prettier/prettier */
import React from 'react';
import {
    Text,
    View,
} from '../components/Themed';

const DetailScreen = ({route})=> {
  return (
      { flex: 1, alignItems: 'center', justifyContent: 'center' }}
        详情页面
        标题是：{route.params.screenName}
        参数Url是：{route.params.url}
      
  );
};

export default DetailScreen;

App.js

App.js

import React from 'react';
import {
  StyleSheet,
  SafeAreaView,
  StatusBar,
  useColorScheme,
} from 'react-native';
import Navigation from './js/navigation';
import {
  DarkTheme,
  DefaultTheme,
  NavigationContainer,
} from '@react-navigation/native';

const App = () => {
  const colorScheme = useColorScheme();
  return (
    
      
      
    
  );
};

export default App;

至此代码结束。

源码分享：

https://download.csdn.net/download/lxyoucan/12819575