Переход от стека к основанию вкладок заставляет topBar исчезать в react-native-navigation 2

Я создаю фиктивный проект, чтобы учиться. Итак, я создаю фиктивную страницу входа с кнопкой, которая перенаправляет меня в основное приложение, которым является приложение bottomTabs. На экране входа в систему отображается верхняя панель, но затем, когда я нажимаю кнопку для перенаправления, я не вижу ни одной верхней панели, даже если я ее определил.

Это мой App.js

import { Navigation } from 'react-native-navigation';

import AuthScreen from './src/screens/Auth/Auth';
import FindPlaceScreen from './src/screens/FindPlace/FindPlace';
import SharePlaceScreen from './src/screens/SharePlace/SharePlace';

// Register screens
Navigation.registerComponent("awesome-places.AuthScreen", () => AuthScreen);
Navigation.registerComponent("awesome-places.SharePlaceScreen", () => SharePlaceScreen);
Navigation.registerComponent("awesome-places.FindPlaceScreen", () => FindPlaceScreen);


// Start the app
Navigation.events().registerAppLaunchedListener(() => {
    Navigation.setRoot({
        root: {
            stack: {
                children: [
                    {
                        component: {
                            name: 'awesome-places.AuthScreen',
                            options: {
                                topBar: {
                                    title: {
                                        text: 'Título'
                                    }
                                }
                            }
                        }
                    }
                ],
            }
        }
    });
});

Вот мой компонент AuthScreen:

import React, {Component} from 'react';
import { Button, View, Text, StyleSheet } from 'react-native';
import startMainTabs from './../MainTabs/startMainTabs';

export default class AuthScreen extends Component {

    loginHandler = () => {
        startMainTabs();
    }

    render() {
        return (
            <View style={styles.container}>
                <Text>AuthScreen</Text>
                <Button title="Login" onPress={this.loginHandler}/>
            </View>
        );
    }

}

const styles = StyleSheet.create({

    container: {
        margin: 25
    }

});

И код основных вкладок:

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

const startTabs = () => {
    Promise.all([
        Icon.getImageSource('md-map', 30),
        Icon.getImageSource('ios-share-alt', 30)
    ]).then((res) => {
        Navigation.setRoot({
            root: {
                bottomTabs: {
                        children: [
                            {
                                component: {
                                    name: 'awesome-places.SharePlaceScreen',
                                    options: {
                                        topBar: {
                                            visible: true,
                                            title: {
                                                text: 'Título'
                                            }
                                        },
                                        bottomTab: {
                                            fontSize: 12,
                                            text: 'A',
                                            icon: res[0],
                                        }
                                    }
                                },
                            },
                            {
                                component: {
                                    name: 'awesome-places.FindPlaceScreen',
                                    options: {
                                        topBar: {
                                            visible: true,
                                            title: {
                                                text: 'Título'
                                            }
                                        },
                                        bottomTab: {
                                            fontSize: 12,
                                            text: 'B',
                                            icon: res[1],
                                        }
                                    }
                                },
                            },
                        ],
                },
            }
        });
    })
}

export default startTabs;

Если это поможет, то компоненты, которые я вызываю, точно такие же, и код такой:

import React, {Component} from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class FindPlaceScreen extends Component {

    render() {
        return (
            <View style={styles.container}>
                <Text>Find Place</Text>
            </View>
        );
    }

}

const styles = StyleSheet.create({

    container: {
        margin: 25
    }

});

В настоящее время я использую следующую среду:

  • Версия React Native Navigation: 2.12.0
  • Версия React Native: 0.57.5
  • Платформы (iOS, Android или оба?): IOS
  • Информация об устройстве (Симулятор / Устройство? Версия ОС? Отладка / Выпуск?): Устройство, iPhone 7 с iOS 12.1.4

person Jacobo    schedule 28.02.2019    source источник


Ответы (1)


Я изменяю свой файл stratMainTabs на:

import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

const startTabs = () => {
    Promise.all([
        Icon.getImageSource('md-map', 30),
        Icon.getImageSource('ios-share-alt', 30)
    ]).then((res) => {
        Navigation.setRoot({
            root: {
                bottomTabs: {
                    children: [
                        {
                            stack: {
                                children: [
                                    {
                                        component: {
                                            name: 'awesome-places.SharePlaceScreen',
                                            options: {
                                                topBar: {
                                                    animate: false,
                                                    visible: true,
                                                    title: {
                                                        text: 'Título A'
                                                    }
                                                },
                                                bottomTab: {
                                                    fontSize: 12,
                                                    text: 'A',
                                                    icon: res[0],
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        },
                        {
                            stack: {
                                children: [
                                    {
                                        component: {
                                            name: 'awesome-places.FindPlaceScreen',
                                            options: {
                                                topBar: {
                                                    animate: false,
                                                    visible: true,
                                                    title: {
                                                        text: 'Título B'
                                                    }
                                                },
                                                bottomTab: {
                                                    fontSize: 12,
                                                    text: 'B',
                                                    icon: res[1],
                                                }
                                            }
                                        },
                                    }
                                ]
                            }
                        },
                    ],
                },
            }
        });
    })
}

export default startTabs;

В основном я помещаю дочерние элементы внутрь и складываю, а внутри этого стека я добавляю tabComponent. И это решает проблему. Может ли кто-нибудь поделиться, почему это работает?

person Jacobo    schedule 28.02.2019