React-Native bottomTabNavigation con grande pulsante al centro
Voglio creare un bottomTabNavigation come questo:

Sono riuscito a creare una scheda Navigazione come questa inserendo un'immagine position:'absolute'
ma l'immagine sta traboccando dalla scheda e la parte che trabocca non è cliccabile.

Il mio codice in questo momento:
<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,
}
Quindi ho creato una scheda personalizzata Navigazione con l'elica tabBar={props => <CustomTabBar {...props} />}
ma ho ancora lo stesso problema:


il quadrato rosso è un'Opacità tangibile ma solo la parte verde è cliccabile, la parte sopra la scheda non è ancora cliccabile e non capisco perché ...
Hai un'idea di come creare un pulsante così grande nel mezzo del fondoTabNavigation?
Risposte
Penso di averlo fatto funzionare creando una barra delle schede personalizzata e passando quel componente alla tabBar
prop del navigatore di schede:
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,
},
});
Quindi puoi passare la CustomTabBar al navigatore di schede in questo modo:
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>
);
};