React-Native 底部TabNavigation 中间有大按钮

Question

我想创建一个像这样的bottomTabNavigation：

我设法通过放入图像来创建这样的 tabNavigation，position:'absolute'但图像溢出了选项卡，并且溢出的部分不可单击。

我此时的代码：

    <Tab.Navigator initialRouteName="Activity" tabBarOptions={{
        showIcon: true,
        showLabel: false,
        activeTintColor: 'blue',
      }}>

      <Tab.Screen name="Theme" component={Themes} options={{
        tabBarIcon: () => (<Image source={require('../Images/list_blue.png')} style={styles.icon}/>)
      }}/>

      <Tab.Screen name="Activity" component={Activity} options={{
        tabBarIcon: () => (<Image source={require('../Images/idea_blue.png')} style={styles.main_icon}/>)
      }}/>

      <Tab.Screen name="Add" component={Add} options={{
        tabBarIcon: () => (<Image source={require('../Images/plus_blue.png') style={styles.icon}/>)
      }}/>

  </Tab.Navigator>

    //Styles
    icon: {
      width: 40,
      height: 40,
    },
    main_icon: {
      position: 'absolute',
      bottom: -30,
      width: 115,
      height: 115,
    }

然后我用 prop 创建了一个 cust tabNavigationtabBar={props => <CustomTabBar {...props} />} 但我仍然有同样的问题：

红色方块是可触摸的不透明度，但只有绿色部分可点击，选项卡上方的部分仍然不可点击，我不明白为什么......

您知道如何在底部TabNavigation中间制作这么大的按钮吗？

Answer 1

tabBar我想我已经通过创建自定义选项卡栏并将该组件传递给选项卡导航器的支柱来使其工作：

function CustomTabBar({ state, descriptors, navigation, position }) {
  return (
    <View
      style={{
        flexDirection: 'row',
        height: 50,
        alignItems: 'center',
        justifyContent: 'space-around',
      }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        const inputRange = state.routes.map((_, i) => i);

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}>
            {route.name === 'Screen 2' ? (
              <Image
                style={styles.logo}
                source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
              />
            ) : (
              <Image
                style={styles.logo_tiny}
                source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
              />
            )}
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  logo: {
    width: 80,
    height: 80,
    bottom: 0,
  },
  logo_tiny: {
    width: 30,
    height: 30,
  },
});

然后您可以将 CustomTabBar 传递给选项卡导航器，如下所示：

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="Activity"
        tabBarOptions={{
          showIcon: true,
          showLabel: false,
          activeTintColor: 'blue',
        }}
        tabBar={(props) => <CustomTabBar {...props} />}>
        <Tab.Screen name="Screen 1" component={Screen1} />
        <Tab.Screen name="Screen 2" component={Screen2} />
        <Tab.Screen name="Screen 3" component={Screen3} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};