React Native 如何设置选项卡屏幕的背景颜色?

fnvucqvd  于 2022-12-14  发布在  React
关注(0)|答案(2)|浏览(204)

正如您在下面看到的,我尝试了很多方法将背景颜色设置为透明,如this(需要UI),但都没有效果。

<Tab.Navigator screenOptions={{
    tabBarShowLabel: false,
    swipeEnabled: false,
    tabBarShowIcon: true,
    tabBarItemStyle: { width: iconwidth },
    tabBarStyle: { backgroundColor: 'transparent', paddingBottom: 10},
    tabBarContentContainerStyle: {backgroundColor : 'transparent', display: 'flex', justifyContent: 'center', alignItems: 'center'},
    tabBarPressColor: '#3C60AA',
    tabBarIndicatorStyle: {width: iconwidth , height: 5, backgroundColor: '#3C60AA', borderRadius: 20, marginStart: iconwidth *0.61},
    lazy: true,
    lazyPlaceholder: () => <POTab_lazy/>
  }}>

    <Tab.Screen name="POTab_1" component={POTab_1} options={{ tabBarAccessibilityLabel: 'Info',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_info.png')} style={{width: 30, height: 30 }}/>), }}/>
    <Tab.Screen name="POTab_2" component={POTab_2} options={{tabBarAccessibilityLabel: 'File',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_file.png')} style={{width: 30, height: 30 }}/>),}}/>
    <Tab.Screen name="POTab_3" component={POTab_3} options={{tabBarAccessibilityLabel: 'Attach',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_attach.png')} style={{width: 30, height: 30 }}/>),}}/>
    <Tab.Screen name="POTab_4" component={POTab_4} options={{tabBarAccessibilityLabel: 'Link',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_link.png')} style={{width: 30, height: 30 }}/>),}}/>
    <Tab.Screen name="POTab_5" component={POTab_5} options={{tabBarAccessibilityLabel: 'Timer',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_timer.png')} style={{width: 30, height: 30 }}/>),}}/>
  </Tab.Navigator>

); }
POTab_1.js代码如下所示

<ScrollView showsVerticalScrollIndicator={false}>
  <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'flex-start', padding: 20 }}>
    
    <View style={{marginBottom: 15}}>
      <Text style={{color: 'grey', fontFamily: 'Poppins-Regular', lineHeight: 20}}>Purchase Order</Text>
      <Text style={{color: 'black', fontFamily: 'Poppins-Bold'}}>450004892</Text>
    </View>

    <View style={{marginBottom: 15}}>
      <Text style={{color: 'grey', fontFamily: 'Poppins-Regular', lineHeight: 20}}>Vendor id</Text>
      <Text style={{color: 'black', fontFamily: 'Poppins-Bold'}}>0003300000</Text>
    </View>

    <View style={{marginBottom: 15}}>
      <Text style={{color: 'grey', fontFamily: 'Poppins-Regular, lineHeight: 20'}}>Vendor Name</Text>
      <Text style={{color: 'black', fontFamily: 'Poppins-Bold'}}>ITT Texas</Text>
    </View>

    <View style={{marginBottom: 15}}>
      <Text style={{color: 'grey', fontFamily: 'Poppins-Regular, lineHeight: 20'}}>Item No</Text>
      <Text style={{color: 'black', fontFamily: 'Poppins-Bold'}}>00010</Text>
    </View>

  </View>
</ScrollView>

package.json
@React导航/材料顶部选项卡:“^6.2.2”
React Native分页器视图:“^5.4.25”
React Native选项卡视图:“^3.1.1”
有关材质顶栏导航器参考,请查看此处

yquaqz18

yquaqz181#

如果你想为整个标签栏设置背景颜色,那么我们需要为Tab.Navigator提供tabBarOptions属性中的style
请考虑以下代码片段。

<Tab.Navigator
  tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
    }
  }}>

更新了代码以包含tabBarOptions

<Tab.Navigator screenOptions={{
    tabBarShowLabel: false,
    swipeEnabled: false,
    tabBarShowIcon: true,
    tabBarItemStyle: { width: iconwidth },
    tabBarStyle: { backgroundColor: 'transparent', paddingBottom: 10},
    tabBarContentContainerStyle: {backgroundColor : 'transparent', display: 'flex', justifyContent: 'center', alignItems: 'center'},
    tabBarPressColor: '#3C60AA',
    tabBarIndicatorStyle: {width: iconwidth , height: 5, backgroundColor: '#3C60AA', borderRadius: 20, marginStart: iconwidth *0.61},
    lazy: true,
    lazyPlaceholder: () => <POTab_lazy/>
  }}
  tabBarOptions={{
    style: {
      backgroundColor: 'transparent',
    }
  }}>

    <Tab.Screen name="POTab_1" component={POTab_1} options={{ tabBarAccessibilityLabel: 'Info',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_info.png')} style={{width: 30, height: 30 }}/>), }}/>
    <Tab.Screen name="POTab_2" component={POTab_2} options={{tabBarAccessibilityLabel: 'File',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_file.png')} style={{width: 30, height: 30 }}/>),}}/>
    <Tab.Screen name="POTab_3" component={POTab_3} options={{tabBarAccessibilityLabel: 'Attach',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_attach.png')} style={{width: 30, height: 30 }}/>),}}/>
    <Tab.Screen name="POTab_4" component={POTab_4} options={{tabBarAccessibilityLabel: 'Link',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_link.png')} style={{width: 30, height: 30 }}/>),}}/>
    <Tab.Screen name="POTab_5" component={POTab_5} options={{tabBarAccessibilityLabel: 'Timer',tabBarIcon: ({ tintColor }) => ( <Image source={require('../../assets/icon_timer.png')} style={{width: 30, height: 30 }}/>),}}/>
  </Tab.Navigator>
2nbm6dog

2nbm6dog2#

如果你想改变屏幕,而不是标签栏本身,我发现设置sceneContainerStyle是一种很好的方法:

<Tab.Navigator sceneContainerStyle={{backgroundColor: 'transparent'}} >

相关问题