如何在 React 导航 5.x 中创建透明背景?
How can i create a transparent background in react navigation 5.x?
我更改了背景颜色以使其更加明显。我想让红色容器变得透明。
有什么办法可以实现吗?
我正在使用 react-navigation 5 并根据创建了一个自定义底部标签栏
Bottom-tab-navigator
我用于底栏的代码如下
import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from 'styles/colors';
import TabBarItem from './TabBarItem/TabBarItem';
const homeIcon = require('assets/maps.png');
export enum Item {
Home,
ProfileView,
}
const DashboardTabBar: React.FC<{}> = ({ state, descriptors, navigation }) => {
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TabBarItem
icon={homeIcon}
isFocused={isFocused}
onPress={onPress}
onLongPress={onLongPress}
options={options}
key={route.key}
/>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
padding: 10,
paddingBottom: 18,
backgroundColor: 'red', // I tried with 'transparent' here, but i see a white background instead of transparent
},
innerContainer: {
height: 60,
backgroundColor: colors.GREY_L_10,
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
borderRadius: 50,
borderWidth: 1,
borderColor: colors.GREY,
},
});
export default DashboardTabBar;
就我查看代码而言,我找不到任何使其透明的方法。
const styles = StyleSheet.create({
container: {
padding: 10,
paddingBottom: 18,
backgroundColor: 'transparent',
},
innerContainer: {
height: 60,
backgroundColor: colors.GREY_L_10,
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
borderRadius: 50,
borderWidth: 1,
borderColor: colors.GREY,
},
});
默认情况下,从 createBottomTabNavigator
返回的 Navigator 不会与 TabBar 重叠屏幕。话虽这么说,即使您的 TabBar 是透明的,您的屏幕也会在 TabBar 开始的地方结束。屏幕不会落后于 TabBar
幸运的是,您需要做的就是将 position: 'absolute', bottom: 0, left: 0, right: 0
添加到您的 TabBar container
样式(您应用 backgroundColor: 'transparent'
的样式)
在代码的其他地方,您有一个使用 DashboardTabBar 组件的组件。您应该将带有 style 对象的 tabBarOptions 道具添加到 Tab.Navigator 组件,例如所以:
<Tab.Navigator
tabBar={...}
tabBarOptions={{
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
elevation: 0, <----to get rid of a shadow problem on Android
},
}}>
{ /* ...your screens go here */ }
</Tab.Navigator>
我已经在 iOS 和 Android 上成功完成了此操作。 就我个人而言,它看起来不太适合我的应用程序。
对于 React Navigation v6,您需要在 TabNavigator 上设置 screenOptions。
(我结合自定义/透明底部标签栏使用)
import {
BottomTabBar,
createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
<Tab.Navigator
screenOptions={{
tabBarStyle: {backgroundColor: 'blue'},
}}
tabBar={props => {
return (
<View>
<BottomTabBar {...props} />
</View>
);
}}
initialRouteName={SCREEN_NAMES.APP.HOME_TAB}
...
</Tab.Navigator>
我更改了背景颜色以使其更加明显。我想让红色容器变得透明。
有什么办法可以实现吗? 我正在使用 react-navigation 5 并根据创建了一个自定义底部标签栏 Bottom-tab-navigator
我用于底栏的代码如下
import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from 'styles/colors';
import TabBarItem from './TabBarItem/TabBarItem';
const homeIcon = require('assets/maps.png');
export enum Item {
Home,
ProfileView,
}
const DashboardTabBar: React.FC<{}> = ({ state, descriptors, navigation }) => {
return (
<View style={styles.container}>
<View style={styles.innerContainer}>
{state.routes.map((route, index) => {
const { options } = descriptors[route.key];
const isFocused = state.index === index;
const onPress = () => {
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TabBarItem
icon={homeIcon}
isFocused={isFocused}
onPress={onPress}
onLongPress={onLongPress}
options={options}
key={route.key}
/>
);
})}
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
padding: 10,
paddingBottom: 18,
backgroundColor: 'red', // I tried with 'transparent' here, but i see a white background instead of transparent
},
innerContainer: {
height: 60,
backgroundColor: colors.GREY_L_10,
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
borderRadius: 50,
borderWidth: 1,
borderColor: colors.GREY,
},
});
export default DashboardTabBar;
就我查看代码而言,我找不到任何使其透明的方法。
const styles = StyleSheet.create({
container: {
padding: 10,
paddingBottom: 18,
backgroundColor: 'transparent',
},
innerContainer: {
height: 60,
backgroundColor: colors.GREY_L_10,
flexDirection: 'row',
justifyContent: 'space-evenly',
alignItems: 'center',
borderRadius: 50,
borderWidth: 1,
borderColor: colors.GREY,
},
});
默认情况下,从 createBottomTabNavigator
返回的 Navigator 不会与 TabBar 重叠屏幕。话虽这么说,即使您的 TabBar 是透明的,您的屏幕也会在 TabBar 开始的地方结束。屏幕不会落后于 TabBar
幸运的是,您需要做的就是将 position: 'absolute', bottom: 0, left: 0, right: 0
添加到您的 TabBar container
样式(您应用 backgroundColor: 'transparent'
的样式)
在代码的其他地方,您有一个使用 DashboardTabBar 组件的组件。您应该将带有 style 对象的 tabBarOptions 道具添加到 Tab.Navigator 组件,例如所以:
<Tab.Navigator
tabBar={...}
tabBarOptions={{
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
elevation: 0, <----to get rid of a shadow problem on Android
},
}}>
{ /* ...your screens go here */ }
</Tab.Navigator>
我已经在 iOS 和 Android 上成功完成了此操作。 就我个人而言,它看起来不太适合我的应用程序。
对于 React Navigation v6,您需要在 TabNavigator 上设置 screenOptions。 (我结合自定义/透明底部标签栏使用)
import {
BottomTabBar,
createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
<Tab.Navigator
screenOptions={{
tabBarStyle: {backgroundColor: 'blue'},
}}
tabBar={props => {
return (
<View>
<BottomTabBar {...props} />
</View>
);
}}
initialRouteName={SCREEN_NAMES.APP.HOME_TAB}
...
</Tab.Navigator>