我使用react-native-tab-view。那么如何仅将背景色设置为选定的选项卡?
这就是我所拥有的...
<TabView
navigationState={this.state}
renderScene={SceneMap({
first: FirstRoute,
second: SecondRoute,
third: ThirdRoute,
fourth: FourthRoute,
})}
onIndexChange={index => this.setState({ index })}
initialLayout={{ width: Dimensions.get('window').width, height: Dimensions.get('window').height }}
useNativeDriver = {true}
renderTabBar={(props) =>
<TabBar
{...props}
indicatorStyle={{ backgroundColor: 'white' }}
style={{backgroundColor: "black", height: 40}}
renderIcon={this.renderIcon}
indicatorStyle={{backgroundColor: "#555555"}}
/>
}
/>
谢谢!
答案 0 :(得分:1)
这适用于文本样式更改。唯一的区别是,您不必更改renderlabel
内“文本”标签上的样式,而必须更改“查看”标签的样式。
renderLabel={({ route }) => {
return (
<View> //THIS IS WHERE YOU PUT THE CONDITIONAL STYLING
<Text
style={
route.key === props.navigationState.routes[this.state.index].key
? styles.selectedTabTextStyle
: styles.label
}
>
{route.title}
</Text>
</View>
);
}}