使用TabNavigator作为按钮

Question

我正在使用反应导航，我想使用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
}

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

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

Answer 1

通过在tabBarComponent属性中设置选项卡，可以将选项卡设置为按钮。

这是本机基( 用于反应本机的ui库 )文档中的一个示例:本机基础。

您只需修改按钮的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>
      );
    }
  }
));