反应导航 - TabBar中的Wrap按钮

Question

我是React Native的新手，我试图在图片中使用TabBar。我的问题是在标签栏中放一个按钮。如果有人可以帮助我或有想法创建这个标签栏，那可能会非常好。 THX

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

我不得不做类似的事情。我使用的阵营导航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',
  },

最终结果