正如您在下面看到的,我尝试了很多方法将背景颜色设置为透明,如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”
有关材质顶栏导航器参考,请查看此处
2条答案
按热度按时间yquaqz181#
如果你想为整个标签栏设置背景颜色,那么我们需要为Tab.Navigator提供
tabBarOptions
属性中的style。请考虑以下代码片段。
更新了代码以包含
tabBarOptions
2nbm6dog2#
如果你想改变屏幕,而不是标签栏本身,我发现设置
sceneContainerStyle
是一种很好的方法: