时间戳

首页 > 解决方案 > 本机基本选项卡组件在 Expo 上不起作用

react-native - 本机基本选项卡组件在 Expo 上不起作用

问题描述

我正在尝试使用 Expo 将 Native Base Tab 组件添加到我的项目中。我完全通过 Native Base 自己的示例来测试它是否有效，但无法使其在任何选项卡上工作。

此外，为了检查是否有任何依赖关系导致问题，我在新的 Expo 项目和选项卡上测试它再次不起作用。 因此，我在不使用 Expo 的情况下测试了选项卡并且它有效。所以，我确定问题是世博会，但我不知道如何解决它。我将在下面写下我的依赖关系，感谢您的帮助。

选项卡不起作用的部分是当我单击 Tab2 或 Tab3 时没有任何变化，它卡在 Tab1（初始选项卡）上。此外，它不包含任何选项卡的内容，包括初始选项卡 (Tab1)。

我的依赖：

"axios": "^0.18.0",
"expo": "^32.0.0",
"native-base": "^2.12.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-native-pie-chart": "^1.0.13",
"react-native-router-flux": "^4.0.6",
"react-native-swiper-flatlist": "^1.0.9",
"react-native-ui-kitten": "^3.1.2",
"react-navigation": "^3.3.2"

Native Base Tab的示例代码：

import React, { Component } from 'react';
import { Container, Header, Content, Tab, Tabs } from 'native-base';
import Tab1 from './tabOne';
import Tab2 from './tabTwo';
import Tab3 from './tabThree';
export default class TabsExample extends Component {
  render() {
    return (
      <Container>
        <Header hasTabs />
        <Tabs>
          <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
          <Tab heading="Tab3">
            <Tab3 />
          </Tab>
        </Tabs>
      </Container>
    );
  }
}

标签： react-nativeexponative-base

解决方案

本机基础选项卡组件有点错误

尝试使用这个库

https://www.npmjs.com/package/react-native-tab-view

但我会说尝试使用您正在使用的导航库制作标签，例如 react-native-navigation 或 router-flux

推荐阅读