react-native - 使自定义按钮出现在 React Native 导航栏的顶部
问题描述
我想创建一个导航栏,中间有一个大的自定义按钮。路由和一切正常,但按钮在导航栏组件的边界处被切断。我怎样才能做到这一点,以便按钮显示在顶部?我尝试了 zIndex,但这对我不起作用。谢谢你。
const HomeIcon = <Icon name="time-outline" size={40} color="#829a9a" />;
const ScanIcon = <Icon name="qr-code-outline" size={60} color="#829a9a" />;
const GiftsIcon = <Icon name="gift-outline" size={40} color="#829a9a" />;
const App: () => Node = () => {
const customTabBarStyle = {
activeTintColor: '#3ED77C',
inactiveTintColor: '#829a9a',
allowFontScaling: true,
labelStyle: { fontSize: 14, paddingTop: 5 },
tabStyle: { paddingTop: 5 },
style: { height: 70},
}
return (
<NavigationContainer>
<Tab.Navigator tabBarOptions={customTabBarStyle}>
<Tab.Screen name="Home" component={HomeScreen}
options={{
tabBarLabel: 'Aktuell',
tabBarIcon: () => (HomeIcon),
}} />
<Tab.Screen name="Scan" component={ScanScreen}
options= {({navigation}) => ({
tabBarLabel: 'Scanner',
tabBarButton: (props) => (
<Button onPress={() => navigation.navigate('Scan')}
buttonStyle={styles.buttonStyle}
icon={ScanIcon}
/>)
})} />
<Tab.Screen name="Gifts" component={GiftsScreen}
options={{
tabBarLabel: 'Prämien',
tabBarIcon: () => (GiftsIcon),
}} />
</Tab.Navigator>
</NavigationContainer>
);
};
const styles = StyleSheet.create({
buttonStyle: {
bottom: 30,
justifyContent: 'center',
alignItems: 'center',
height: 120,
width: 120,
backgroundColor: 'lightgrey',
borderRadius: 100,
},
});
export default App;
解决方案
我已经做了类似的按钮检查这个例子->
youtube 链接 - https://youtu.be/vIWi7eLZomk
您可以查看此示例 https://github.com/vishalpwr/bottom-tab-navigation
const BottomTab = ({ type, color, size = 24, isFocused, index }) => {
const icon = index == 0 ? 'home' : 'heart';
const gradient = index == 1;
return (
<View>
{gradient ? (
<LinearGradient
colors={[Colors.light, Colors.dark]}
start={{ x: isFocused ? 0 : 1, y: 0 }} end={{ x: isFocused ? 1 : 0, y: 0 }}
style={styles.middleIcon}>
<AppIcon name={'shopping-basket'} type={type} size={size} color={'white'} />
</LinearGradient>
) : (
<View style={styles.icon}>
<AppIcon name={icon} type={type} size={size} color={color} />
</View>
)}
</View>
)
}
const App = () => {
return (
<NavigationContainer>
<TabNavigator />
</NavigationContainer>
)
};
const Tab = createBottomTabNavigator();
const TabNavigator = () => {
return (
<Tab.Navigator
tabBar={(props) => <MyTabBar {...props} />}>
<Tab.Screen name="home" component={HomeScreen} />
<Tab.Screen name="Shop" component={ShopScreen} />
<Tab.Screen name="Favorite" component={FavoriteScreen} />
</Tab.Navigator>
)
}
const MyTabBar = ({ state, descriptors, navigation }) => {
return (
<View
style={styles.bottomBar}>
{state.routes.map((route, index) => {
const isFocused = state.index === index;
const { options } = descriptors[route.key];
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
})
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
}
const color = isFocused ? Colors.dark : Colors.gray;
return (
<TouchableOpacity
key={index}
onPress={onPress}
testID={options.tabBarTestID}
accessibilityRole="button"
>
<BottomTab
type={index !== 1 ? Icons.MaterialCommunityIcons : Icons.FontAwesome5}
index={index}
isFocused={isFocused}
size={24}
color={color}
/>
</TouchableOpacity>
)
})}
</View>
)
}
const styles = StyleSheet.create({
bottomBar: {
height: 60,
backgroundColor: 'white',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-around',
},
middleIcon: {
bottom: 18,
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: 'red',
justifyContent: 'center',
alignItems: 'center',
shadowColor: 'black',
shadowOffset: { width: 2, height: 2 },
shadowOpacity: 0.6,
elevation: 8,
}
});
推荐阅读
- r - Shiny Dashboard DT::renderDataTable..输出未渲染..卡在处理中...通过在选项中将其设为“FALSE”来修复它。还没有输出
- java - Swagger Codegen convert "format: time" to non String
- angular - 如何使用错误的凭据停止或退出量角器执行其他规范
- java - Hibernate 表未映射但表存在
- excel - 如何在 Excel 公式中使用 Excel 文本框中的输入值
- sql - Firebird 程序中的错误
- voltdb - VoltDB 支持 SELECT FOR UPDATE 吗?
- python - 带有 __aexit__ 的键盘中断
- makefile - openSUSE 15:无法使用 Makefile 进行链接
- python-3.x - 使用 nginx 扭曲的代理破折号导致“加载布局错误”