Android 如何在RNN V2中实现底部选项卡导航

我正在尝试在我闪亮的新React本机应用程序中使用底部选项卡实现导航。我选择从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()

从“React”导入React
从“反应本机导航”导入{Navigation}
从“react native”导入{Text，View}
从“反应本机矢量图标/Ionicons”导入图标
const prepareIcons=async（）=>{
const[主页、趋势、wifi、列表、帮助]=等待承诺。全部([
图标。getImageSource（'ios-home'，30），
图标.getImageSource（'ios-trending-up'，30），
图标。getImageSource（'ios-wifi'，30），
图标。getImageSource（'ios-list'，30），
图标.getImageSource（'ios-help-floug'，30）
])
返回{主页、趋势、wifi、列表、帮助}
}
const Monitor=类扩展了React.Component{
render（）{
返回监视器
}
}
const Usage=类扩展了React.Component{
render（）{
返回使用配置文件
}
}
const Connection=类扩展了React.Component{
render（）{
返回WiFi连接
}
}
const Reports=类扩展了React.Component{
render（）{
返回报告日志
}
}
const Support=类扩展了React.Component{
render（）{
回报支持
}
}
常量main=async（）=>{
常量图标=等待准备图标（）
Navigation.events（）.onAppLaunched（（）=>{
Navigation.setRoot({
底部选项卡：{
儿童：[{
组成部分：{
名称：'监视器'，
选项：{
底部选项卡：{
图标：icons.home，
标题：“监视器”，
可见：正确
}
}
}
}, {
组成部分：{
名称：'用法'，
选项：{
底部选项卡：{
图标：icons.trend，
标题：“用法”
}
}
}
}, {
组成部分：{
名称：'连接'，
选项：{
底部选项卡：{
图标：icons.wifi，
标题：“WiFi”
}
}
}
}, {
组成部分：{
名称：'报告'，
选项：{
底部选项卡：{
图标：icons.list，
标题：“报告”
}
}
}
}, {
组成部分：{
名称：“支持”，
选项：{
底部选项卡：{
icon:icons.help，
标题：“支持”
}
}
}
}]
}
})
})
}
Navigation.registerComponent（'Monitor'，（）=>Monitor）
Navigation.registerComponent（'用法'，（）=>用法）
registerComponent（'Connection'，（）=>Connection）
registerComponent（'Reports'，（）=>Reports）
registerComponent（'Support'，（）=>Support）
main（）

它生成以下内容（Android emulator）：

应用程序将打开。没有错误。单击时选项卡确实会更改，但正如您在屏幕截图中看到的，当前组件

连接的内容不可见。我做错了什么？我觉得我遗漏了一些东西，但这可能是一个bug


React本机导航版本：2.0.2125
React本机版本：0.53.0
平台：安卓
设备：Nexus5X，安卓8.1.0，调试
问题出在
com.reactnativenavigation.viewcontrollers.BottomTabsController
类的
selectTabAtIndex
方法上。应用下面的
diff
可以修复它

diff--git a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabscocontroller.java b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/BottomTabsContr
索引87812bc5..69d45877 100644
---a/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabscocontroller.java
+++b/lib/android/app/src/main/java/com/reactnativenavigation/viewcontrollers/bottomtabscocontroller.java
@@-145,7+145,7@@公共类BottomTabsController扩展ParentController实现AHBottomNa
void selectTabAtIndex（最终整数新索引）{
getView（）.removeView（getCurrentView（））；
bottomTabs.setCurrentItem（newIndex，false）；
-getView（）.addView（getCurrentView（））；
+getView（）.addView（getCurrentView（），匹配父项，匹配父项）；
}
@非空