React---零基础学习React之React TabNavigation

Posted 2020-11-03 xuan-0107

看了一点点文档，看到导航部分

写个小 demo

 

想实现的效果

 

创建项目 react-native init ReacNativeDemo

在初始结构下添加了src文件夹放置源码，目录结构如下

 

步骤

1-安装组件

安装导航组件React Navigation

yarn add react-navigation

 

安装第三方图标组件react-native-vector-icons

yarn add react-native-vector-icons

 

2-创建5个tab页面

HomeView.js

import React, {Component} from ‘react‘;
import {
   Text,
} from ‘react-native‘;
export default class Home extends Component {
   render() {
       return (
           <Text>首页</Text>
       )
   }
}

LiveView.js / RankView.js/ FindView.js / MineView.js

和 HomeView.js 几乎一样，只是把 <Text>首页</Text> 中的文字改成相应的。

 

3-配置导航路由route.js

先导入需要的组件，包括上面自己写的5 个 tab

 注册tabs

const AppTabNavigator = TabNavigator({
   Home: {
       screen: HomeView,
       navigationOptions: {
           tabBarLabel: ‘首页‘,
           tabBarIcon: ({tintColor}) => {
             return <Entypo name="home" size={25} color={tintColor} />;
           },
       },
   },
   Live: {
       screen: LiveView,
       navigationOptions: {
           tabBarLabel: ‘直播‘,
           tabBarIcon: ({tintColor}) => {
             return <Entypo name="mic" size={25} color={tintColor} />;
           },
       }
   },
   Rank: {
       screen: RankView,
       navigationOptions: {
           tabBarLabel: ‘排行榜‘,
           tabBarIcon: ({tintColor}) => {
             return <Entypo name="bar-graph" size={25} color={tintColor} />;
           },
       }
   },
   Find: {
       screen: FindView,
       navigationOptions: {
           tabBarLabel: ‘发现‘,
           tabBarIcon: ({tintColor}) => {
             return <Entypo name="direction" size={25} color={tintColor} />;
           },
       }
   },
   Mine: {
       screen: MineView,
       navigationOptions: {
           tabBarLabel: ‘我的‘,
           tabBarIcon: ({tintColor}) => {
             return <Entypo name="user" size={25} color={tintColor} />;
           },
       }
   }
}, {
   animationEnabled: false, // 切换页面时是否有动画效果
   tabBarPosition: ‘bottom‘, // 显示在底端，android 默认是显示在页面顶端的
   swipeEnabled: true, // 是否可以左右滑动切换tab
   backBehavior: ‘none‘, // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
   tabBarOptions: {
       activeTintColor: ‘#1890ff‘, // 文字和图片选中颜色
       inactiveTintColor: ‘gray‘, // 文字和图片未选中颜色
       showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
       indicatorStyle: {
           height: 0  // 如TabBar下面显示有一条线，可以设高度为0后隐藏
       }, 
       pressOpacity: 0.8,
       style: {  
               height: 46,  
               backgroundColor: ‘#ffffff‘,  
               zIndex: 0,  
               position: ‘relative‘  
       },  
       labelStyle: {  
               fontSize: 11,  
               paddingVertical: 0,  
               marginTop: -3,
       },  
       iconStyle: {  
               marginTop: -2  
       },  
   },
});

 

配置路由

export const AppNavigator = StackNavigator(
   {
       Home  : { screen: AppTabNavigator, navigationOptions: { header: null }},
       Mine    : { screen: MineView, navigationOptions: { header: null }},
   },
   {
       headerMode        : ‘screen‘,
       initialRouteName  :‘Home‘,
   }
);

 

4-修改APP.js

在render中引用定义的StackNavigator--AppNavigator

import React, { Component } from ‘react‘;
import {
 StyleSheet,
 Text,
 View
} from ‘react-native‘;
import { AppNavigator } from ‘./src/route‘;


export default class App extends Component {
 render() {
   return (
     <AppNavigator/>
   );
 }
}

 

 

5-运行 react-native run-ios

 

6-图标react-native-vector-icons 踩坑

地址：https://github.com/oblador/react-native-vector-icons

可查询图标地址：https://oblador.github.io/react-native-vector-icons/

安装：yarn add react-native-vector-icons

Ios:

安装了好几次，运行都有问题

react-native开发踩坑之 ios上react-native-vector-icons 的error：unRecognized font family ‘FontAwesome‘

把node_modules/react-native-vector-icons下的onts文件添整个加到工程中

Finish，然后编辑Info.plist文件

<key>UIAppFonts</key>
<array>
    <string>Zocial.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>Ionicons.ttf</string>
    <string>Foundation.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>Ferther.ttf</string>
    <string>Entypo.ttf</string>
    <string>Evilcons.ttf</string>
</array>

 

Xcode的Info.plist出现这种

编辑完重新运行才有效