Question

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

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。这就解决了问题。有人可以分享为什么这行得通吗？

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

1 个答案: