使用反应导航的每个选项卡中有两个图像的自定义选项卡栏? [英] A Custom Tab bar with two images in each tab using react navigation?

问题描述

我正在使用 React Native for ios 创建一个应用程序.而不是有一个活动的 tintColor 我想要有两个小三角形(另一个图像/图标)，当你在选定的选项卡上时会出现.重要的是三角形的中心 y 轴与标签栏图像底部的 y 轴 = = 并且标签图标位于三角形的中心，如下所示.目前我有标签栏，图标和导航工作 - 我只是不知道如何让三角形出现:

I am creating an app using React Native for ios. Instead of having an active tintColor I want to have two little triangles (another image/icon) which appears when you are on the selected tab. It is important that the center y axis of the triangles is = to the y axis of the bottom of the tabbar image and that the tab icon is in the center of the triangles as seen below. At the moment I have the tab bar, the icons and navigation working - I just don't know how to make the triangles appear:

图标标签

import React, {Component} from 'react';
import {
     Image,
     TouchableOpacity,
     View
} from 'react-native';

class IconTab extends Component {
    render() {
        let icon = require('./Assets/Settings.png');
        const {press, focused, index} = this.props;
        if (index === 0) {
           icon = require('./Assets/Settings.png');
        } else if (index === 1) {
           icon = require('./Assets/Home.png');
        } else if (index === 2) {
           icon = require('./Assets/Search.png');
        } else if (index === 3) {
          icon = require('./Assets/Inbox.png');
        } else {
          icon = require ('./Assets/Profile.png');
        }
        return (
            <TouchableOpacity onPress={press}>
                <Image source={icon} resizeMode={'contain'}/>
            </TouchableOpacity>
        );
     }
  }
 export default IconTab;

标签栏

import React, { Component } from 'react';
import { View, Platform, StyleSheet, Image, TouchableOpacity } from 'react 
native';
import {SafeAreaView} from 'react-navigation';
import IconTab from "./IconTab";

class TabBar extends Component {
   render() {
     const {
        navigation,
        jumpToIndex,
     } = this.props;
     const {
        routes
     } = navigation.state;
     return (
        <SafeAreaView forceInset={{ top: 'always' }}>
           <View style={styles.tabbarcontainer}>
               <Image
                  style={styles.bg}
                  source={require('./Assets/Header.png')}
                  resizeMode={'stretch'}/>
               <View style={styles.tabbar}>
                  {routes && routes.map((route, index) => {
                  const focused = index === navigation.state.index;
                  const tabKey = route.key;
                return <IconTab
                      press={() => jumpToIndex(index)}
                      key={route.key}
                      index={index}
                      focused={focused}
                      />
                   })}
               </View>
            </View>
         </SafeAreaView>
       );
     }
  }

 const styles = StyleSheet.create({
    tabbarcontainer: {
       height: 50,
    },
    bg: {
       position: 'absolute',
       width: '100%',
       height: 44,
       alignSelf: 'center',
    },
    tabbar: {
       margin: 5,
       height: 34,
       flexDirection: 'row',
       justifyContent: 'space-around',
       alignItems: 'center',
       alignContent: 'center',
       backgroundColor: 'transparent',
       borderTopColor: 'transparent',
    },

 });

 export default TabBar;

标签导航器

import {TabNavigator} from 'react-navigation';
import TabBar from "./TabBar";
import Settings from "./Settings";
import Home from "./Home";
import Search from "./Search";
import Inbox from "./Inbox";
import Profile from "./Profile";

export const TabRouter = TabNavigator({
    Settings: {
            screen: Settings,
    },
    Home: {
            screen: Home,
    },
    Search: {
            screen: Search,
    },
    Inbox: {
            screen: Inbox,
    },
    Profile: {
            screen: Profile,
    },
 }, {

    initialRouteName: 'Home',
    tabBarComponent: TabBar,
    tabBarPosition: 'top',

 });

App.js

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';

import {TabRouter} from "./Components/TabRouter";

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

SETTINGS、HOME、SEARCH、INBOX、MESSAGE、PROFILE 屏幕是一个基本模型，如下所示 - 这是一个主屏幕示例:

The SETTINGS, HOME, SEARCH, INBOX, MESSAGE, PROFILE screens are a basic mockup as follows - this is an example of the home screen:

 import React, {Component} from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';

 export default class Home extends Component {
    render () {
    return (
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text style={{fontSize: 30}}>Home Screen</Text>
      </View>
    );
  }
}

我用来构建这个的参考是 https://github.com/tuanson45/react-native-custom-tab

The reference I used to build this is https://github.com/tuanson45/react-native-custom-tab

非常感谢任何回复和帮助！谢谢

I really appreciate any replies and help with this! Thanks

推荐答案

TABBAR

import React, { Component } from 'react';
import { View, Platform, StyleSheet, Image, TouchableOpacity } from 'react- 
native';
import {SafeAreaView} from 'react-navigation';
import IconTab from "./IconTab";

class TabBar extends Component {
  render() {
    const {
      navigation,
      jumpToIndex,
    } = this.props;
    const {
      routes
    } = navigation.state;
    return (
        <SafeAreaView style={{zIndex: 10}} forceInset={{ top: 'always' }}>
          <View style={styles.tabbarcontainer}>
                <Image
                   style={styles.bg}
                   source={require('./Assets/Header.png')}
                   resizeMode={'stretch'}/>
            <View style={styles.tabbar}>
              {routes && routes.map((route, index) => {
                const focused = index === navigation.state.index;
                const tabKey = route.key;
                return <View key={route.key} style={{ alignItems: 'center' }}>
                  <IconTab
                    press={() => jumpToIndex(index)}
                    key={route.key}
                    index={index}
                    focused={focused}
                  />
                  {focused && <Image source= {require('./Assets/Triangles.png')}
                                     style={{ position: 'absolute', top: 38 }} />}
                </View>;
              })}
            </View>
          </View>
      </SafeAreaView>
       );
    }
}

const styles = StyleSheet.create({
  tabbarcontainer: {
    height: 44,
  },
  bg: {
    position: 'absolute',
    width: '100%',
    height: 44,
    alignSelf: 'center',
  },
  tabbar: {
    margin: 5,
    height: 34,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    alignContent: 'center',
    backgroundColor: 'transparent',
    borderTopColor: 'transparent',
  },

});

export default TabBar;

这篇关于使用反应导航的每个选项卡中有两个图像的自定义选项卡栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！