如何将按钮添加到 React Native 上的BottomTabNavigator? [英] How to add Button to a BottomTabNavigator on React Native?

问题描述

我的目标是为 Home、Dashboard 和 Album 提供顶部和底部导航栏，但没有用于 SignIn.问题来了，我想把按钮放在底部而不是顶部.

My goal is to have both Top and Bottom navigation bar for Home, Dashboard, and Album, but not for the SignIn. Here's the catch, I wish to put the button on the bottom instead of on the top.

剩下的最后一个难题是如何将 Sign In 按钮添加到底部导航栏.

The last remaining puzzle is how to add a Sign In button to the Bottom Navigation Bar.

障碍是如果您编写

The roadblock is if you write <Tab.Screen name="Sign In component={SignIn} /> and you press a button with parameter onPress={() => navigation.navigate('SignIn')}, it will navigate you to the Tab.Screen instead of Stack.Screen.

const Tab = createBottomTabNavigator();
function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Dashboard" component={Dashboard} />
      <Tab.Screen name="Album" component={Album} />
    </Tab.Navigator>
  );
}

const Stack = createStackNavigator();
function MyStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen options={{title: ''}} name="MyTabs" component={MyTabs} />
      <Stack.Screen name="SignIn" component={SignIn} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <MyStack />
      </NavigationContainer>
    </Provider>
  );
}

推荐答案

您可以使用如下所示的 tabbarbutton.这将传递道具并渲染可触摸不透明度，您可以拥有自己的 onPress.

You can use the tabbarbutton like below. This would pass the props and render a the touchableopacity and you can have your own onPress.

你可以导航，这里我已经发出警报

You can navigate, here i have given an alert

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

这篇关于如何将按钮添加到 React Native 上的BottomTabNavigator?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！