Question

我在EXPO中使用react-native。我的问题是在expo客户端中运行时工作正常。但是，当我构建一个独立的应用程序时，createBottomTabNavigator中反应导航的底部选项卡丢失了一半。

Expo客户端截图https://i.stack.imgur.com/fN0QG.png

独立应用的屏幕截图https://i.stack.imgur.com/H18o3.png

这是我的导航代码

MainTabNavigator.js

const tabNavigator = createBottomTabNavigator({
    Home: HomeStack,
    Transactions: TransactionsStack,
    Profile: ProfileStack,
}, {
        initialRouteName: 'Home'
    });

export default tabNavigator;

AppNavigator.js

export default createAppContainer(
    createAnimatedSwitchNavigator({
        Auth: AuthNavigator,
        Main: MainTabNavigator
    }, {
        initialRouteName: 'Auth',
        transition: (
            <Transition.Together>
                <Transition.Out
                    type="slide-bottom"
                    durationMs={400}
                    interpolation="easeIn"
                />
                <Transition.In type="fade" durationMs={500} />
            </Transition.Together>
        )
    })
);

我不知道我的代码是否存在问题或独立博览会捆绑软件中的错误。请帮忙！

Answer 1

如果尚未完成，我的建议是使用react-native init开始一个项目，链接所有依赖项，并仅链接您编写的c / p源代码。那一切都会好起来的。只是不要使用Expo中的eject。

Answer 2

我在Expo的Github存储库中提交了一个问题，并有一个答案。问题是我在app.json文件中使用了androidStatusBar道具。编译为独立版本时，它会将我的状态栏下推至下方，因此损失了一半。解决方案是简单地将其删除并使用react-native的<StatusBar/>。

内置独立应用程序时，BottomTabNavigator覆盖一半

2 个答案: