如何更改活动选项卡的颜色?(选项卡为自定义)

Question

我在RN v 0.46.1项目中使用反应导航

我使用了反应导航示例目录中的自定义选项卡。

我想在活动时更改选项卡的颜色。

我试图通过并使用导航选项，但没有成功。

另外，选项卡显示在顶部，我希望它们在底部。

import React, { Component } from "react";
import { AppRegistry,  Button,
Platform,
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View } from "react-native";
import { createNavigator,
createNavigationContainer,
TabRouter,
addNavigationHelpers } from 'react-navigation'
import Chats from './Chats'
import Contacts from './Contacts'
const MyNavScreen = ({ navigation, banner }) => (
<ScrollView>
<Text>banner</Text>
<Button
onPress={() => {
navigation.goBack(null);
}}
title="Go back"
/>
</ScrollView>
);
const MySettingsScreen = ({ navigation }) => (
<MyNavScreen banner="Settings Screen" navigation={navigation} />
);
const CustomTabBar = ({ navigation }) => {
const { routes } = navigation.state;
return (
<View style={styles.tabContainer}>
{routes.map(route => (
<TouchableOpacity
onPress={() => navigation.navigate(route.routeName)}
style={styles.tab}
key={route.routeName}
>
<Text>{route.routeName}</Text>
</TouchableOpacity>
))}
</View>
);
};
const CustomTabView = ({ router, navigation }) => {
const { routes, index } = navigation.state;
const ActiveScreen = router.getComponentForState(navigation.state);
const routeNav = addNavigationHelpers({
...navigation,
state: routes[index],
});
const routeOptions = router.getScreenOptions(routeNav, 'tabBar');
console.log(routeOptions.headerTintColor);
return (
<View style={styles.container}>
<CustomTabBar navigation={navigation} />
<ActiveScreen
navigation={addNavigationHelpers({
...navigation,
state: routes[index],
})}
/>
</View>
);
};

const CustomTabRouter = TabRouter(
{
Friends: {
screen: Chats,
path: '',
},
Status: {
screen: Contacts,
path: 'notifications',
},
Other: {
screen: MySettingsScreen,
path: 'settings',
},
},
{
initialRouteName: 'Friends',
},
);
const CustomTabs = createNavigationContainer(
createNavigator(CustomTabRouter)(CustomTabView)
);
const styles = StyleSheet.create({
container: {
marginTop: Platform.OS === 'ios' ? 20 : 0,
},
tabContainer: {
flexDirection: 'row',
height: 48,
},
tab: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
margin: 4,
borderWidth: 1,
borderColor: '#ddd',
borderRadius: 4,
backgroundColor:'white'
},
});
export default CustomTabs;
AppRegistry.registerComponent('awsm', () => CustomTabs);

Answer 1

比较地图中活动选项卡的routeName并添加样式，例如

style={[(this.props.activeRouteName == route.routeName) ? styles.activeTab : styles.tab]}

对于底部的样式选项卡，您可以在父视图中使用ScrollView，然后使用选项卡，因此，它将是这样的

<View style={flex:1}>
<ScrollView>
// your page content
</ScrollView>
<Tabs/>
</View>

通过使用滚动视图，您将能够强制底部的选项卡。

Answer 2

你不能用默认TabNavigator实现你想要的吗？

在文档中，您可以将TabBarComponent传递给 TabNavigator，并将tabBarPosition - position of the tab bar, can be 'top' or 'bottom'设置为bottom，以便您的 tabBar 位于底部。

如果你仍然想自己做所有这些，我想：

• 要对齐底部的选项卡栏，您可以将{ position: 'absolute', bottom: 0 }放在选项卡栏样式上
• 要更改焦点选项卡的颜色，您可以执行以下操作：

const CustomTabBar = ({ navigation }) => { const { routes, index } = navigation.state; const isFocused = routes[index].routeName == route.routeName; // Not totally sure about the condition there, but you get the idea? return ( <View style={styles.tabContainer}> {routes.map(route => ( <TouchableOpacity onPress={() => navigation.navigate(route.routeName)} style={[styles.tab, isFocused ? styles.focusedTab : null]} key={route.routeName} > <Text>{route.routeName}</Text> </TouchableOpacity> ))} </View> ); };

？