react-native - 导航容器不显示<scrollview></scrollview>

问题描述

我是一名 React Native 学生。如果这是一个基本问题，我很抱歉。

我的项目中只有一个名为 Main 的组件 - 该组件是在 App.js 中导入的。（重要：我已经删除了 App.js 中的所有样式）

所以 - 这是我在 Main.JS 中的代码。

import * as React from 'react';
import { Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Search from '../Search'
import ClientsRegister from '../ClientRegister'
import { ScrollView } from 'react-native-gesture-handler';

function HomeScreen() {
  return (
    
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    
      
      <ScrollView>
        <NavigationContainer>
          <Tab.Navigator 
            screenOptions={({ route }) => ({
              tabBarIcon: ({ focused, color, size }) => {
                let iconName;

                if (route.name === 'Home') {
                  iconName = focused ? 'ios-information-circle' : 'ios-information-circle-outline';
                } else if (route.name === 'Settings') {
                  iconName = focused ? 'ios-list-box' : 'ios-list';
                }

                // You can return any component that you like here!
                return <Ionicons name={iconName} size={size} color={color} />;
              },
            })}
            tabBarOptions={{
              activeTintColor: 'tomato',
              inactiveTintColor: 'gray',
            }}
          >
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Settings" component={SettingsScreen} />
          </Tab.Navigator>
        </NavigationContainer>
        </ScrollView> 
    
  );
}

看到了<ScrollView>吗？当然——这不是正确的做法。但如果我<View>只使用 - 导航栏就会消失。

所以 - 这两种情况都适合你。我认为这里会非常巨大……但这里是印刷品。

和<ScrollView>

和<View>

我在这里做错了什么？当然，我需要使用 VIEW，但它没有出现。哦，对于它隐藏在底部，在控制按钮后面的情况，我试图放置<View style={{marginBottom:100}}>但也没有工作。

（我真的需要给手机充电，不是吗？）

标签： react-native

您好，类似于@Meyer Buaharon 所说的 - 要解决此问题，您需要更改：

<View>
   <NavigationContainer>
     ...
   </NavigationContainer>
</View>

至：

<View style={{flex: 1}}> 
   <NavigationContainer>
     ...
   </NavigationContainer>
</View>

这意味着视图会填满整个屏幕。

react-native - 导航容器不显示

问题描述

解决方案

推荐阅读