反应导航 - TabBar 中的换行按钮

Question

我是 React Native 的新手，我正在尝试在图像中制作 TabBar。我的问题是在标签栏中放置一个按钮。如果有人可以帮助我或有创建此标签栏的想法，那就太好了。谢谢

Answer 1

你可以看看这个link。传递 TabNavigator 的道具之一是 tabBarComponent。如果您不想要默认样式或必须制作自定义 tabBar，您可以指定组件的外观。

在你的情况下这应该有效。

import React from 'react';
import {View, Text, TouchableOpacity, Dimensions} from 'react-native';
import {TabNavigator} from 'react-navigation';
import Tab1Screen from '../components/tab1Screen';
import Tab2Screen from '../components/tab2Screen';

var {height, width} = Dimensions.get('window');

const mainRoutes = TabNavigator({
 Tab1: {screen: Tab1Screen},
 Tab2: {screen: Tab2Screen}
},
{
 tabBarComponent:({navigation}) => (
  <View style={{flex: 0.1, borderColor: 'green', borderWidth: 1}}>
    <View style={{flexDirection:'row', justifyContent: 'space-around', alignItems: 'center', paddingTop: 15}}>
      <View style={{width: 40, height: 40, borderRadius: 20, borderColor: 'red', borderWidth: 1, position: 'absolute', left: width/2.5, bottom:13 }}></View>
      <TouchableOpacity onPress={() => navigation.navigate('Tab1')}>
        <Text>Tab1</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigation.navigate('Tab2')}>
        <Text>Tab2</Text>
      </TouchableOpacity>
    </View>
</View>
)});

export default mainRoutes;

Answer 2

我不得不做类似的事情。我使用的是 React Navigation v5，在我的例子中，按钮必须执行自定义操作而不是导航到选项卡。这就是我所做的：

import styles from './styles';
// Other needed imports...

// ...

<Tab.Screen
  name="Add Recipe"
  component={() => null}
  options={{
    tabBarButton: () => (
      <TouchableOpacity
        style={styles.addIconWrapper}
        onPress={() => {
          // Your custom action here
        }}
      >
        <View style={styles.addIconBackground}>
          <Image source={assets.add} style={styles.addIconImage} />
        </View>
      </TouchableOpacity>
    ),
  }}
/>;

在styles.js里面：

 // ...

addIconWrapper: {
    width: '20%',
    justifyContent: 'center',
    alignItems: 'center',
  },

  addIconBackground: {
    marginTop: -30,
    backgroundColor: '#85c349',
    borderColor: 'white',
    shadowOffset: { width: 2, height: 2 },
    shadowColor: '#999',
    shadowOpacity: 0.5,
    borderRadius: 1000,
    width: 42,
    height: 42,
    justifyContent: 'center',
    alignItems: 'center',
  },

  addIconImage: {
    tintColor: 'white',
  },

反应导航 - TabBar 中的换行按钮

React navigation- Wrap button in TabBar

tabbar

react-native

react-navigation

最终结果