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

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}
/>
)}
/>
);
}

用于路线的视图只是： - 带有一些输入的表单 - 而"菜单"是一个"可拖动的FlastList"，我试图删除它，但选项卡"按"事件仍然不起作用......

顺便说一句，我的 DraggableFlastList 阻止我在选项卡上向左/向右滑动(因为我想是因为可触摸不透明度元素(，所以当我在"菜单"选项卡上时，我真的很卡住......

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

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)
}}
/>

Answer 3

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

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

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