从堆栈转到底部的距离使TOPBAR在反应基本运动中消失了2

Question

i创建一个虚拟项目以学习。因此，我创建了一个带有一个按钮的虚拟登录页面，该按钮将我重定向到主应用程序，该应用程序是底部tabs应用程序。登录屏幕可见，但是当我单击要重定向的按钮时，即使我定义了任何TOPBAR，我也看不到任何TOPBAR。

这是我的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
• 反应本机版本：0.57.5
• 平台（S）（ios，Android或两者？）：ios
• 设备信息（simulator/device？os版本？调试/发行版？）：设备，iPhone 7带iOS 12.1.4

Answer 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。这解决了问题。有人可以分享为什么这样做吗？