Question

我正在使用React Navigation，我想使用TabNavigator浏览多个标签。我不知道的是，是否有可能使用一个标签作为按钮。

const Tabs = TabNavigator({
    Tab1: { screen: Tab1 },
    Tab2: { screen: Tab2 },
    Button: {//This needs to be a button },
    Tab3: { screen: Tab3 },
    Tab4: { screen: Tab4 },   
}, 
{
  //some TabBarOptions
}

我试图在Button中排除屏幕支柱并将其包装在<Touchable>中，但是我得到了需要定义屏幕的错误。

|-----|-----|-----|-----|-----|
|Tab 1|Tab 2| But |Tab 3|Tab 4|
|-----|-----|-----|-----|-----|

Answer 1

您可以通过设置 tabBarComponent 属性中的标签，将标签设置为按钮。

这是来自原生基础（ui library for react native）文档的示例： 原生基地

您只需修改按钮的onPress()方法即可执行您喜欢的操作

export default (MainScreenNavigator = TabNavigator(
  {
    LucyChat: { screen: LucyChat },
    JadeChat: { screen: JadeChat },
    NineChat: { screen: NineChat }
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: props => {
      return (
        <Footer>
          <FooterTab>
           <Button
              vertical
              active={props.navigationState.index === 0}
              onPress={() => alert("Do something")}> //this is the change
              <Icon name="bowtie" />
              <Text>Button</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate("LucyChat")}>
              <Icon name="bowtie" />
              <Text>Lucy</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 2}
              onPress={() => props.navigation.navigate("JadeChat")}>
              <Icon name="briefcase" />
              <Text>Nine</Text>
            </Button>
            <Button
              vertical
              active={props.navigationState.index === 3}
              onPress={() => props.navigation.navigate("NineChat")}>
              <Icon name="headset" />
              <Text>Jade</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
));

使用TabNavigator作为按钮

1 个答案: