Question

我在RN v 0.46.1项目中使用react-navigation

我在react-navigation的示例目录中使用了customTabs。

我希望在激活时更改标签的颜色。

我试过传递ans使用navigationOptions但没有成功。

此外，标签显示在顶部，我希望它们位于底部。

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>

通过使用scrollview，您可以强制底部的标签。

Answer 2

您是否可以使用默认TabNavigator实现所需目标？

在https://developer.apple.com/documentation/avfoundation/avplayer/1388846-rate中，您可以将TabBarComponent传递给TabNavigator并将tabBarPosition - position of the tab bar, can be 'top' or 'bottom'设置为bottom，以便您的tabBar位于底部。

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

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

如何更改活动标签的颜色？（标签是自定义的）

2 个答案:

如何更改活动标签的颜色？ （标签是自定义的）

2 个答案:

如何更改活动标签的颜色？（标签是自定义的）