如何在 RNN V2 中实现底部标签导航

Question

我正在尝试在我闪亮的新 React Native 应用程序中使用底部选项卡实现导航。我选择从 React Native Navigation 第二版开始。

目前的代码如下：

import React from 'react'
import { Navigation } from 'react-native-navigation'
import { Text, View } from 'react-native'
import Icon from 'react-native-vector-icons/Ionicons'

const prepareIcons = async () => {
    const [ home, trend, wifi, list, help ] = await Promise.all([
        Icon.getImageSource('ios-home', 30),
        Icon.getImageSource('ios-trending-up', 30),
        Icon.getImageSource('ios-wifi', 30),
        Icon.getImageSource('ios-list', 30),
        Icon.getImageSource('ios-help-buoy', 30)
    ])

    return { home, trend, wifi, list, help }
}

const Monitor = class extends React.Component {
    render() {
        return <View><Text>Monitor</Text></View>
    }
}

const Usage = class extends React.Component {
    render() {
        return <View><Text>Usage profile</Text></View>
    }
}

const Connection = class extends React.Component {
    render() {
        return <View><Text>WiFi connection</Text></View>
    }
}

const Reports = class extends React.Component {
    render() {
        return <View><Text>Reports log</Text></View>
    }
}

const Support = class extends React.Component {
    render() {
        return <View><Text>Support</Text></View>
    }
}

const main = async () => {
    const icons = await prepareIcons()

    Navigation.events().onAppLaunched(() => {
        Navigation.setRoot({
            bottomTabs: {
                children: [{
                    component: {
                        name: 'Monitor',
                        options: {
                            bottomTab: {
                                icon: icons.home,
                                title: 'Monitor',
                                visible: true
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Usage',
                        options: {
                            bottomTab: {
                                icon: icons.trend,
                                title: 'Usage'
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Connection',
                        options: {
                            bottomTab: {
                                icon: icons.wifi,
                                title: 'WiFi'
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Reports',
                        options: {
                            bottomTab: {
                                icon: icons.list,
                                title: 'Reports'
                            }
                        }
                    }
                }, {
                    component: {
                        name: 'Support',
                        options: {
                            bottomTab: {
                                icon: icons.help,
                                title: 'Support'
                            }
                        }
                    }
                }]
            }
        })
    })
}

Navigation.registerComponent('Monitor', () => Monitor)
Navigation.registerComponent('Usage', () => Usage)
Navigation.registerComponent('Connection', () => Connection)
Navigation.registerComponent('Reports', () => Reports)
Navigation.registerComponent('Support', () => Support)

main()

它产生这个（Android 模拟器）：

应用程序打开。没有错误。单击时选项卡会发生变化，但正如您在屏幕截图中所见，当前组件 Connection 的内容不可见。我究竟做错了什么？我觉得我缺少一些东西，但这可能是一个错误。

React Native Navigation 版本：2.0.2125
React Native 版本：0.53.0
平台：Android
设备：Nexus 5X，Android8.1.0，调试

Answer 1

问题出在 com.reactnativenavigation.viewcontrollers.BottomTabsController class 的 selectTabAtIndex 方法上。应用下面的 diff 修复它。

diff --git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsContr
index 87812bc5..69d45877 100644
--- a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
+++ b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsController.java
@@ -145,7 +145,7 @@ public class BottomTabsController extends ParentController implements AHBottomNa
     void selectTabAtIndex(final int newIndex) {
         getView().removeView(getCurrentView());
         bottomTabs.setCurrentItem(newIndex, false);
-        getView().addView(getCurrentView());
+        getView().addView(getCurrentView(), MATCH_PARENT, MATCH_PARENT);
     }

     @NonNull

如何在 RNN V2 中实现底部标签导航

How to implement bottom tab navigation in RNN V2

android

reactjs

react-native

react-native-navigation