反应原生自定义MaterialTopTabNavigator

时间:2018-06-11 13:41:23

标签: reactjs react-native react-navigation react-native-tabnavigator

如何自定义TabNavigator。 TabNavigator有一个带顶部的边距,当我更改标签时有两个小的矩形。

This is what I want

我尝试使用tabBarComponent但没有改变

import FooterTabs from "./components/chCOMP/FooterTabs";
export const UpViewTabbar = createMaterialTopTabNavigator(
 {
  PerPostTabScreen: UpViewPerPost,
  PerMonthTabScreen: UpViewPerMonth
 },
 {
  shifting: true,
  labeled: true,
  activeTintColor: "#FFFFFF",
  inactiveTintColor: "#F4F4F4",
  barStyle: {
  backgroundColor: "#129DF7"
 },
  tabBarComponent: props => <FooterTabs {...props} />,
  initialRouteName: "PerPostTabScreen"
 }
);

FooterTabs文件我喜欢这个

import React from "react";
import {
  ActivityIndicator,
  StyleSheet,
  View,
  TextInput,
  Text,
  TouchableOpacity,
  FlatList,
  Alert,
  Image
} from "react-native";

export default class FooterTabs extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>FooterTabs Component</Text>
      </View>
    );
  }
}

怎么做?

0 个答案:

没有答案