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

您可以像这样使用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 2

这个对我有用

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

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

2 个答案: