Android Hardware Back Button causes Blank Screen

Đang mở
  • Có gì không ổn?
#7,643 2 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
android, javascript, react-native
Lĩnh vực
mobile-dev

Hướng nghiên cứu

Bắt đầu với thiết lập điều hướng trong index.js và các tùy chọn Android hardwareBackButton, sau đó thực hiện các bước tái hiện được liệt kê trên các phiên bản React Native và Android đã nêu. So sánh hành vi khi khởi chạy lại với workaround Native Back Handler; hoàn tất khi khởi chạy lại sau hardware Back Button không hiển thị màn hình trống.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

needs triage triage: bug

🐛 Bug Report

Only on Android, when the user uses the Hardware Back Button and they are at the landing screen, the Activity closes. Then when the application is started again I see a blank screen. This happens only if I use the hardware back. If I minimize the application using the hardware home button, then there are no issues.

I read somewhere that I should use the events().registerAppLaunchedListener but that doesn't get invoked.

Have you read the Contributing Guidelines on issues?

Yes, I have read them.

To Reproduce

  1. Create a blank application using the React Native CLI
  2. Install the latest version of the navigation library
  3. Create a Bottom Navigation
  4. As the first tab create a Stack Navigator
  5. Press the hardware back button on the phone
  6. Enter the application again

ERROR: Blank screen.

NOTES: I am using a legacy project that somebody else wrote and I am trying to maintain/update it.

The way the bottom tab bar is created is very weird to me. I found that this code causes the tab bar to appear, however, without this code the tab bar is missing:

// hide the tab bar when navigating to screens that are not in tabBarScreens
Navigation.events().registerCommandListener((name, params) => {
let componentNames = params &&
    params.layout &&
    params.layout.data && [params.layout.data.name]

componentNames =
    componentNames ||
    (params &&
    params.layout &&
    Array.isArray(params.layout) &&
    params.layout
        .map((layout) => layout.data && layout.data.name)
        .filter((c) => c !== undefined))

if (componentNames && componentNames.length === 0) {
    componentNames = undefined
}

componentNames =
    componentNames ||
    (params &&
    params.layout &&
    params.layout.children &&
    params.layout.children
        .map((child) => child.data && child.data.name)
        .filter((c) => c !== undefined))

if (componentNames && componentNames.length === 0) {
    componentNames = undefined
}

componentNames =
    componentNames ||
    (params &&
    params.layout &&
    params.layout.root &&
    params.layout.root.children &&
    params.layout.root.children
        .map((child) => child.data && child.data.name)
        .filter((c) => c !== undefined))
console.log({ name, params })
switch (name) {
    case 'push':
    case 'showModal':
    if (componentNames && componentNames.length > 0) {
        if (
        getTabBarScreen(componentNames[componentNames.length - 1]) ===
        undefined
        ) {
        store.dispatch(setShouldBeVisible(false))
        screenStack.push({
            componentName: componentNames[componentNames.length - 1],
            tabBarVisible: false,
        })
        } else {
        screenStack.push({
            componentName: componentNames[componentNames.length - 1],
        })
        }
    }
    break
    case 'pop':
    case 'dismissModal':
    if (screenStack.length > 1) {
        screenStack.pop()
    }
    break
    case 'popToRoot':
    screenStack = [screenStack[0]]
    break
    case 'setRoot':
    case 'setStackRoot':
    if (componentNames && componentNames.length > 0) {
        screenStack = componentNames.map((c) => {
        return { componentName: c }
        })
    }
    break
}
})

The stack navigation is created as follows:

// This code is executed in the index.js file
let navStack = [
    {
        screenName: MainScreen.screenName(),
        passProps: {
            initial: true,
            navigateToRunning: true,
        },
    },
]
          
const createNavigationStack = (screenList) => {
  return screenList.map((item) => {
    return {
      component: {
        name: item.screenName,
        passProps: item.passProps,
        options: {
          animations: {
            setStackRoot: {
              enabled: false,
            },
          },
          popGesture: false,
          hardwareBackButton: {
            dismissModalOnPress: true,
            popStackOnPress: true,
            bottomTabsOnPress: 'previous',
          },
        },
      },
    }
  })
}
          
Navigation.setRoot(createNavigationStack(navStack))

I have no idea why things are done this way. The only workaround to my problem was to override the Native Back Handler and just disable it:

BackHandler.addEventListener('hardwareBackPress', () => true);

Expected behavior

I expect that the application will return to the last screen that was displayed when it is relaunched.

Actual Behavior

A Blank screen is shown

Your Environment

  • React Native Navigation version: 7.30.2
  • React Native version: 0.70.5
  • Platform(s) (iOS, Android, or both?): Android 11
  • Device info (Simulator/Device? OS version? Debug/Release?): Simulator + Samsung Galaxy S20 FE, both Debug and Release

Reproducible Demo

N/A, the code is proprietry.

Are you willing to resolve this issue by submitting a Pull Request?
  • ✖️   Yes, I have the time, and I know how to start.
  • ✖️   Yes, I have the time, but I don't know how to start. I would need guidance.
  • ✅   No, I don’t have the time and I’m okay to wait for the community / maintainers to resolve this issue.
Ngôn ngữ chính
MDX
Star
13.2k
Fork
2.6k
Merge trung bình
3 giờ 21 phút
Pull request đã merge (30 ngày)
5

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của wix/react-native-navigation

Tất cả issue của wix/react-native-navigation

Issue tương tự

Thêm issue về Mobile Dev

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.