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

时间:2018-02-10 19:39:33

标签: android reactjs react-native react-native-navigation

我正在尝试使用闪亮的新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模拟器):

Application screen

应用程序打开。没有错误。单击时标签会发生变化,但正如您在屏幕截图中看到的那样,当前组件Connection的内容不可见。我究竟做错了什么?我觉得有些东西我不知道,但这可能是一个错误。

  • React Native Navigation版本:2.0.2125
  • React Native version:0.53.0
  • 平台:Android
  • 设备:Nexus 5X,Android 8.1.0,调试

1 个答案:

答案 0 :(得分:1)

问题出在selectTabAtIndex类的com.reactnativenavigation.viewcontrollers.BottomTabsController方法上。应用下面的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