在TabBar中的按钮中更改屏幕

Question

我有两个主屏幕：

• 第一（底部栏包含3个标签）
• 第二（标准新屏幕）

如何使BottomTabBar中的按钮单击以打开新屏幕？

默认情况下，底部栏中的按钮会打开一个新选项卡。我想要一个按钮来打开一个全新的屏幕

就像在屏幕上一样

带有Tab（3个元素）的屏幕代码：

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator tabBarOptions={{
        showLabel: true,
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          borderTopWidth: 0,
          elevation: 0,
        }
      }}>
        <Tab.Screen name="Home" component={Home}/>
        <Tab.Screen name="Second" component={Second}/>
        <Tab.Screen name="Other" component={Other} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

您可以尝试以下方法：

<Tab.Screen
        options={({navigation}) => ({
            tabBarButton: props => 
                <TouchableOpacity {...props} onPress={() => navigation.navigate('YourScreen')} />
        })}
        name="Second" component={Second}
/>

如果底部标签中未包含该屏幕，您可以导航到新屏幕：

您可以在这里找到更多信息：https://reactnavigation.org/docs/bottom-tab-navigator#tabbarbutton

希望有帮助：）