从堆栈移动到bottomTabs使topBar在react-native-navigation 2中消失答案

【问题标题】：Moving from stack to bottomTabs make topBar disappear in react-native-navigation 2从堆栈移动到bottomTabs使topBar在react-native-navigation 2中消失
【发布时间】：2019-02-28 01:51:45
【问题描述】：

我创建了一个虚拟项目来学习。因此，我创建了一个带有按钮的虚拟登录页面，该按钮将我重定向到主应用程序，它是一个 bottomTabs 应用程序。登录屏幕的 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
React Native 版本：0.57.5
平台（iOS、Android 或两者？）：iOS
设备信息（模拟器/设备？操作系统版本？调试/发布？）：设备，带有 iOS 12.1.4 的 iPhone 7

【问题讨论】：

标签： reactjs react-native react-native-navigation react-native-navigation-v2

【解决方案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。这解决了问题。有人可以分享为什么这是有效的吗？

【讨论】：