如何在 React Native 上将按钮添加到 BottomTabNavigator？

Question

我的目标是为 Home, Dashboard, and Album 同时设置顶部和底部导航栏，但不为 SignIn。 这里有一个问题，我希望将按钮放在底部而不是顶部。

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

障碍是，如果您编写 <Tab.Screen name="Sign In component={SignIn} /> 并按下带有参数 onPress={() => navigation.navigate('SignIn')} 的按钮，它将导航您到 Tab.Screen 而不是 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>
  );
}

Answer 1

您可以像下面这样使用标签栏按钮。这将传递道具并呈现可触摸的不透明度，您可以拥有自己的 onPress。

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

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

如何在 React Native 上将按钮添加到 BottomTabNavigator？

How to add Button to a BottomTabNavigator on React Native?

react-native

react-navigation

react-navigation-v5