React-Native bottomTabNavigation ve ortada büyük Düğme

Question

Bunun gibi bir bottomTabNavigation oluşturmak istiyorum:

Bunun gibi bir tabNavigation oluşturmayı başardım, içine bir görüntü yerleştirerek position:'absolute'ama görüntü sekmeden taşıyor ve taşan kısım tıklanabilir değil.

Şu anki kodum:

    <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,
    }

Sonra prop ile bir cust tabNavigation oluşturdum tabBar={props => <CustomTabBar {...props} />}ama hala aynı problemi yaşıyorum:

kırmızı kare touchableOpacity ama sadece tıklanabilir yeşil kısım, sekmenin üzerindeki kısım hala tıklanabilir değil ve nedenini anlamıyorum ...

AltTabNavigation'ın ortasında bu kadar büyük bir düğmeyi nasıl yapacağınıza dair bir fikriniz var mı?

Answer 1

Sanırım özel bir sekme çubuğu oluşturarak ve bu bileşeni tabBarsekme gezgininin pervanesine geçirerek çalışmasını sağladım:

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,
  },
});

Ardından CustomTabBar'ı sekme gezginine şu şekilde iletebilirsiniz:

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>
  );
};