Как реализовать навигацию по нижней вкладке в RNN V2

Я пытаюсь реализовать навигацию с помощью нижних вкладок в моем новом блестящем приложении 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, Android 8.1.0, отладка

person Rafa    schedule 10.02.2018    source источник


Ответы (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
person Rafa    schedule 12.02.2018