Native Base Tabs内容透明背景
Native Base Tabs content transparent background
我正在使用 Native Base 选项卡,如下所示:
<ImageBackground
source={{uri:imageURl}}
style={{ flex: 1 }}
resizeMode="cover">
<Tabs tabBarUnderlineStyle={{ backgroundColor: "#000000" }}
style={{backgroundColor:'transparent'}}>
<Tab heading={'Tab 1'}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text>Tab 1 content</Text>
</View>
</Tab>
</Tabs>
<Tabs tabBarUnderlineStyle={{ backgroundColor: "#000000" }}>
<Tab heading={'Tab 2'}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text>Tab 2 content</Text>
</View>
</Tab>
</Tabs>
</ImageBackground>
选项卡的内容具有透明背景,因此它应该是作为父图像背景的图像,但它具有白色,当我将选项卡内视图中的透明更改为红色时,它发生了变化!我也尝试删除选项卡并添加文本,而不是我正常看到背景。
问题 is:how 使 Tab 的内容透明而不是白色。
这是零食的例子:Native Base Tabs
我不确定这是不是你想要的?
import * as React from 'react';
import { Text, View, StyleSheet,ImageBackground } from 'react-native';
import { Tab, Tabs } from 'native-base';
export default function App() {
const imageUrl={ uri: "https://reactjs.org/logo-og.png" };
return (
<View style={styles.container}>
<ImageBackground
source={imageUrl}
style={styles.image}
>
<Tabs tabBarUnderlineStyle={{ backgroundColor: "transparent" }}>
<Tab heading={'Tab 1'} style={{flex:1,backgroundColor:'transparent'}} >
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text style={{color:"white"}}>Tab 1 content</Text>
</View>
</Tab>
<Tab heading={'Tab 2'} style={{flex:1,backgroundColor:'transparent'}}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text style={{color:"white"}}>Tab 2 content</Text>
</View>
</Tab>
</Tabs>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
}
});
我正在使用 Native Base 选项卡,如下所示:
<ImageBackground
source={{uri:imageURl}}
style={{ flex: 1 }}
resizeMode="cover">
<Tabs tabBarUnderlineStyle={{ backgroundColor: "#000000" }}
style={{backgroundColor:'transparent'}}>
<Tab heading={'Tab 1'}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text>Tab 1 content</Text>
</View>
</Tab>
</Tabs>
<Tabs tabBarUnderlineStyle={{ backgroundColor: "#000000" }}>
<Tab heading={'Tab 2'}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text>Tab 2 content</Text>
</View>
</Tab>
</Tabs>
</ImageBackground>
选项卡的内容具有透明背景,因此它应该是作为父图像背景的图像,但它具有白色,当我将选项卡内视图中的透明更改为红色时,它发生了变化!我也尝试删除选项卡并添加文本,而不是我正常看到背景。 问题 is:how 使 Tab 的内容透明而不是白色。 这是零食的例子:Native Base Tabs
我不确定这是不是你想要的?
import * as React from 'react';
import { Text, View, StyleSheet,ImageBackground } from 'react-native';
import { Tab, Tabs } from 'native-base';
export default function App() {
const imageUrl={ uri: "https://reactjs.org/logo-og.png" };
return (
<View style={styles.container}>
<ImageBackground
source={imageUrl}
style={styles.image}
>
<Tabs tabBarUnderlineStyle={{ backgroundColor: "transparent" }}>
<Tab heading={'Tab 1'} style={{flex:1,backgroundColor:'transparent'}} >
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text style={{color:"white"}}>Tab 1 content</Text>
</View>
</Tab>
<Tab heading={'Tab 2'} style={{flex:1,backgroundColor:'transparent'}}>
<View style={{flex:1,backgroundColor:'transparent'}}>
<Text style={{color:"white"}}>Tab 2 content</Text>
</View>
</Tab>
</Tabs>
</ImageBackground>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column"
},
image: {
flex: 1,
resizeMode: "cover",
justifyContent: "center"
}
});