reactjs - 反应本机选项卡视图，按切换选项卡不起作用

Question

我在我的应用程序中使用包“react-native-tab-view”。要切换标签，滑动事件工作得很好，但是当我按下我想去的标签时，它不起作用，我不知道为什么......这是我的组件：

export default function TabsMenu() {


const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    {key: 'env', title: 'Env.'},
    {key: 'imp', title: 'Imp.'},
    {key: 'suppl', title: 'Suppl.'},
    {key: 'menus', title: 'Menus.'},
  ]);

  const renderScene = SceneMap({
    env: Environnement,
    imp: Impression,
    suppl: Supplements,
    menus: Menus,
  });

  return (
    <TabView
      navigationState={{index, routes}}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
      style={{flex: 1}}
      renderTabBar={props => (
        <TabBar
          {...props}
          renderLabel={this._renderLabel}
          getLabelText={({route: {title}}) => title}
          indicatorStyle={styles.indicator}
          tabStyle={styles.tabStyle}
          style={styles.tab}
        />
      )}
    />
  );
}

用于路线的视图只是： - 带有一些输入的表单 - 而“菜单”之一，是一个“DraggableFlastList”，我试图将其删除，并且选项卡“Press”事件仍然不起作用......

顺便说一句，我的 DraggableFlastList 阻止我在标签上向左/向右滑动（我猜是因为 TouchableOpacity 元素），所以当我在“菜单”标签上时我真的被卡住了......

如果你们有解决方案... :)

Answer 1

确保您未处于调试模式，当调试模式打开时，点击功能不起作用。我遇到了同样的问题，停止调试解决我的问题。

就我而言，滑动功能工作正常，但不能点击！在 github标签栏上发现这个帖子没有响应点击并最终解决了我的问题。希望这会帮助其他面临同样问题的人。

如果您遇到同样的问题，我建议您检查真实设备。

Answer 2

您可以像这样使用 onTabPress 道具：

<TabBar
  onTabPress={({ route, preventDefault }) => {
    if (route.key === 'home') {
      preventDefault();

      // Do something else
    }
  }}
  ...
/>

并检查 TabView 其他道具在这里： https ://github.com/react-native-community/react-native-tab-view

Answer 3

这个对我有用

 <TabBar
  {...props}
  scrollEnabled
  renderLabel={this.renderLabel}
  onTabLongPress={(scene) => {
    const { route } = scene
    props.jumpTo(route.key)
  }}
/>