如何使TabNavigator按钮按React Navigation按模态屏幕

使用"反应导航"选项卡导航器https://reactnavigation.org/docs/navigators/tab如何使"选项卡"按钮之一按屏幕作为完整屏幕模式，如何将屏幕推向屏幕？我看到堆栈导航器具有mode=modal选项。单击TakePhoto选项卡按钮时，如何获得该模式？单击它目前仍显示底部的标签栏。

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
  },
});

实际上，在反应过程中没有支持将表现方式从default更改为modal（请参阅此处的讨论）。我遇到了同一问题，并通过将headerMode设置为none的非常顶的StackNavigator，将mode设置为modal：

const MainTabNavigator = TabNavigator(
    {
        Tab1Home: { screen: Tab1Screen },
        Tab2Home: { screen: Tab2Screen }
    }
);
const LoginRegisterStackNavigator = StackNavigator({
    Login: { screen: LoginScreen }
});
const ModalStackNavigator = StackNavigator({
    MainTabNavigator:          { screen: MainTabNavigator            },
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
    headerMode: 'none',
    mode:       'modal'
});

这使我可以在Tab1Screen和Tab2Screen中执行以下（使用REDUX），以从我想要的任何地方提出模态视图：

this.props.navigation.navigate('LoginScreenStackNavigator');

不确定这是否仍然与您相关，但是我已经设法找到了实现这一目标。

因此，我已经通过使用TabNavigatorConifg内的TABBARCOMPONEND来使其正常工作，您可以根据索引停止标签导航。

   tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBarBottom
            {...props}
            jumpToIndex={index => {
                if (index === 2) {
                    navigation.navigate('camera')
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />
    )

完成此操作后，我在标签视图顶部显示视图的方法是将TABNAVIGATOR放入stacknavigatior的内部，然后导航到Stacknavigator内部的新屏幕。

react-navigation的底部tabnavigator具有tabBarOnPress导航选项，您可以用来覆盖选项卡：

https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress

const AppContainer = createStackNavigator(
  {
    default: createBottomTabNavigator(
      {
        TAB_0: Stack0,
        TAB_1: Stack1,
        TAB_2: Stack2,
        TAB_3: View // plain rn-view, or any old unused screen
      },
      {
        defaultNavigationOptions: {
          // other tab navigation options...
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            if (navigation.state.key === 'TAB_3') {
              navigation.navigate('tabToOpenAsModal');
            } else {
              defaultHandler();
            }
          }
        }
      }
    ),
    tabToOpenAsModal: {
      screen: TabToOpenAsModalScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none'
  }
);

如果将选项卡导航器嵌套在堆栈导航器中，则可以在按下"标签栏"按钮时打开它。由于模态是打开的，而不是选项卡，因此模态关闭时，应用程序返回到按下模式选项卡之前可见的屏幕。

使得栏走开的一种方法是用 visible: false隐藏塔巴尔：

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen,
    navigationOptions: {
      tabBar: {
        visible: false,
      },
    },
  },
});

但是，这似乎并没有触发向全屏的任何过渡，我想这是需要的吗？

另一个选项可能是将PhotoPickerScreen包装在新的StackNavigator中，并将Navigator设置为Mode ='Modal'。

您可能必须从tabitem上的onpress触发导航到该模式（例如navigation.navigate('TakePhoto')。）

请注意，我正在试图围绕自己如何最好地构建导航，所以…

第三个选项，将stacknavigator实现为父，然后添加MyApp TABNAVIGATOR作为其内部的第一个路线，可能是最灵活的解决方案。然后，TakePhoto屏幕将与TabNavigator处于同一级别，从而可以从任何地方路由到它。

有兴趣听到您想出的内容！

我建议两个解决方案

第一个是关于隐藏

对于第二个

<Tab.Screen
name={Routes.CREATE_ANNOUNCEMENT_SCREEN}
// name={Routes.TEST_SCREEN}
options={{
.
.
.
  tabBarVisible: false,    <----- solution 1
  tabBarButton: (props) => (   <----- or solution 2
    <TouchableOpacity
      {...props}
      onPress={() => {
        navigation.navigate(Routes.DETAILS_SCREEN);
      }}
    />
  ),
}}
component={CreateAnnouncementScreen}
/>

文档在某些区域是斑点的，但是这里是：

    export default class HomeScene extends Component {
        static navigationOptions = {
        title: 'foo',
        header:{
                    visible: true
                }
        }
        ....
      }

相关内容

最新更新

热门标签：