gpt4 book ai didi

react-native - 无法在 SafeAreaView 中包装导航器

转载 作者:行者123 更新时间:2023-12-03 22:06:14 24 4
gpt4 key购买 nike

在 iPhone X 模拟器上运行应用程序时,Material Top Tab Navigator 切入凹槽和底部按钮。

为了解决这个问题,我尝试在应用 App Container 之前实现 SafeAreaView,并将每个单独的屏幕包装在 SafeAreaViews 中。这可以使文本远离这些区域,而不是导航器。

import React, { Component } from 'react';
import { Text, View } from 'react-native';
import { createAppContainer, createMaterialTopTabNavigator, SafeAreaView } from 'react-navigation';

class Calculator extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Calculator!</Text>
</View>
);
}
}

class Camera extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Camera!</Text>
</View>
);
}
}

class Solution extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Solution!</Text>
</View>
);
}
}

const TabNavigator = createMaterialTopTabNavigator(
{
Calculator,
Camera,
Solution
},
{
tabBarPosition: 'bottom',
}
);

const AppContainer = createAppContainer(TabNavigator);

class App extends Component {
render() {
return (
<SafeAreaView>
<AppContainer/>
</SafeAreaView>
);
}
}

export default App;

运行此应用程序时,不存在错误。但是,没有任何渲染。我期望的是一个标签导航器呈现三个标签,这些标签不会在凹口或底部按钮下方切割。

最佳答案

SafeAreaView一个尺寸

<SafeAreaView style={{ flex: 1 }}>
<AppContainer/>
</SafeAreaView>

如果 AppContainer 仍然全屏传播,

import { SafeAreaView } from 'react-navigation'
import { SafeAreaView } from 'react-native'

关于react-native - 无法在 SafeAreaView 中包装导航器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57157037/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com