Блог

Я создал пользовательскую панель вкладок, с помощью которой я могу управлять действием, выполняемым нажатием кнопок вкладок,

Я хочу отключить кнопку tab, чтобы она не отображала весь экран пользовательского интерфейса, но вместо этого хочу показать пользовательское всплывающее окно на верхнем существующем экране

 import React from "react";
import { View, Text, StyleSheet, TouchableOpacity , Alert} from "react-native";

const S = StyleSheet.create({
container: { flexDirection: "row", height: 52, elevation: 2 },
tabButton: { flex: 1, justifyContent: "center", alignItems: "center" }


});



const TabBar = props => {


const {
renderIcon,
getLabelText,
activeTintColor,
inactiveTintColor,
onTabPress,
onTabLongPress,
getAccessibilityLabel,
navigation


} = props;

  const { routes, index: activeRouteIndex } = navigation.state;




showalert = () =>  {
  return (
      <View>
          <Text>Hello World</Text>
      </View>
  )


}
  

возврат (

{routes.map((route, routeIndex) => {
const isRouteActive = routeIndex === activeRouteIndex;
const tintColor = isRouteActive ? activeTintColor: inactiveTintColor;

     return (
      <TouchableOpacity
        key={routeIndex}
        style={S.tabButton}
        onPress={() => {
            (routeIndex == 2) ? alert(routeIndex) : onTabPress({ route });
        }}
        onLongPress={() => {
          onTabLongPress({ route });
        }}
        accessibilityLabel={getAccessibilityLabel({ route })}
      >
        {renderIcon({ route, focused: isRouteActive, tintColor })}

        <Text>{getLabelText({ route })}</Text>
      </TouchableOpacity>
    );
  })}
</View>
  

);
};

экспорт панели вкладок по умолчанию;

Вы можете указать вид в фиксированном положении сверху sp, чтобы он размещался сверху

 tabButton: {
       position:absolute,top:0
    },
  

Это всегда будет размещать представление в верхней части экрана.