如何在React Navigation(4.x)中的某些屏幕中隐藏BottomTabNavigator

时间:2020-07-08 09:48:46

标签: javascript android reactjs react-navigation

我需要在使用React Native和React Navigation构建的应用程序的“聊天”屏幕中隐藏底部的标签导航器。 我有以下代码:

const UserNavigation= createStackNavigator({
  Profile:{screen:Profile},
  Search:{screen:Search},
  Feedback:{screen:Feedback},
  Chat: {screen:Chat}, //I need to hide the bottom tab navigation bar in this screen
},

const TabNavigator = createBottomTabNavigator({
  User: UserNavigation, 
  Settings: SettingsNavigation,
 // etc...
});

我该如何实现?

1 个答案:

答案 0 :(得分:-1)

您无需隐藏BottomNavBar,而是可以将“聊天片段”制作为DialogFragment。因此涵盖了全屏

在Style.xml中复制以下代码

<style name="MY.DIALOG" parent="AppTheme">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
    <item name="android:windowTranslucentStatus">true</item>
</style>

将您的ChatFragment从Fragment扩展到DialogFragment,然后复制以下内容

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setStyle(DialogFragment.STYLE_NORMAL, R.style.MY_DIALOG);
    }

    @Override
    public void onStart() {
        super.onStart();
        Dialog dialog = getDialog();
        if (dialog != null) {
            int width = ViewGroup.LayoutParams.MATCH_PARENT;
            int height = ViewGroup.LayoutParams.MATCH_PARENT;
            dialog.getWindow().setLayout(width, height);
        }
    }

传递DialogFrament的实例

loadDiaogFragment(new ChatFragment);

创建以下功能

private void loadDialogFragment(DialogFragment fragment) {
    FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
    fragment.show(transaction, "Load Fragment");
}

关闭onClickLister内部的DialogFragment使用

dismiss();