Native Base Tabs内容透明背景

Question

我正在使用 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>

选项卡的内容具有透明背景，因此它应该是作为父图像背景的图像，但它具有白色，当我将选项卡内视图中的透明更改为红色时，它改变了！我还尝试删除标签并添加文本，而不是正常看到背景。 问题是：如何使Tab的内容透明而不是白色。 这是零食的例子：Native Base Tabs

Answer 1

我不确定这是否是你想要的？

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"
  }
});