如何让 react-native 导航屏幕填满 ios 模拟器屏幕

Question

我在使用 React Native 导航屏幕时遇到问题

这是我的问题图片：

enter image description here

如您所见，显示的导航屏幕小于模拟器屏幕尺寸。

这是我的相关代码

导航代码：

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {Text, Dimensions} from 'react-native';

import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';
import ProfileScreen from '../screens/ProfileScreen';

const fullScreenWidth = Dimensions.get('window').width;

const Stack = createStackNavigator();

function HomeStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function AboutStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="AboutScreen" component={AboutScreen} />
    </Stack.Navigator>
  );
}

function ProfileStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function Navigation(props) {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          headerTitle: () => {
            return <Text>Header</Text>;
          },
          tabBarIcon: ({focused, color, size, padding}) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'About') {
              iconName = focused
                ? 'information-circle'
                : 'information-circle-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person' : 'person-outline';
            }
            return (
              <Ionicons
                name={iconName}
                size={size}
                color={color}
                style={{paddingBottom: padding}}
              />
            );
          },
          tabBarActiveTintColor: 'lightseagreen',
          tabBarInactiveTintColor: 'grey',
          tabBarLableStyle: {fontSize: 16},
          tabBarstyle: {width: fullScreenWidth},
        })}>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="About" component={AboutStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default Navigation;

屏幕代码（每个屏幕格式相同）：

import React from 'react';
import {SafeAreaView, Text, StyleSheet} from 'react-native';

const HomeScreen = props => {
  return (
    <SafeAreaView style={styles}>
      <Text>Home Screen</Text>
    </SafeAreaView>
  );
};

export default HomeScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

应用程序屏幕：

import 'react-native-gesture-handler';

import * as React from 'react';
import {useState, useEffect} from 'react';
import {Text, View, StyleSheet, Button, Linking} from 'react-native';
import Amplify, {Auth, Hub} from 'aws-amplify';
import awsconfig from './src/aws-exports';

import {Authenticator, withOAuth} from 'aws-amplify-react-native';
import InAppBrowser from 'react-native-inappbrowser-reborn';

import SignUp from './src/components/auth/SignUp';
import ConfirmSignUp from './src/components/auth/ConfirmSignUp';
import SignIn from './src/components/auth/SignIn';
import ForgotPassword from './src/components/auth/ForgotPassword';
import ChangePassword from './src/components/auth/ChangePassword';

import Navigation from './src/components/navigation/Navigation';
import UserContext from './src/components/userContext/UserContext';

async function urlOpener(url, redirectUrl) {
  await InAppBrowser.isAvailable();
  const {type, url: newUrl} = await InAppBrowser.openAuth(url, redirectUrl, {
    showTitle: false,
    enableUrlBarHiding: true,
    enableDefaultShare: false,
    ephemeralWebSession: false,
  });
  if (type === 'success') {
    Linking.openURL(newUrl);
  }
}

Amplify.configure({
  ...awsconfig,
  Analytics: {
    disabled: true,
  },
  oauth: {
    ...awsconfig.oauth,
    urlOpener,
  },
});

function Home(props) {
  return (
    <View>
      <Navigation {...props} />
      <Button title="Sign Out" onPress={() => Auth.signOut()} />
    </View>
  );
}

const AuthScreens = props => {
  console.log(props.authState);
  switch (props.authState) {
    case 'signIn':
      return <SignIn {...props} />;
    case 'signUp':
      return <SignUp {...props} />;
    case 'forgotPassword':
      return <ForgotPassword {...props} />;
    case 'confirmSignUp':
      return <ConfirmSignUp {...props} />;
    case 'changePassword':
      return <ChangePassword {...props} />;
    case 'signedIn':
      return <Home />;
    case 'verifyContact':
      return <Home />;
    default:
      return <></>;
  }
};

const App = props => {
  const [user, setUser] = useState({});
  useEffect(() => {
    Hub.listen('auth', ({payload: {event, data}}) => {
      switch (event) {
        case 'signIn':
        case 'cognitoHostedUI':
          getUser().then(userData => setUser(userData));
          break;
        case 'signOut':
          setUser(null);
          break;
        case 'signIn_failure':
        case 'cognitoHostedUI_failure':
          console.log('Sign in failure', data);
          break;
      }
    });
    getUser().then(userData => setUser(userData));
  }, []);

  function getUser() {
    return Auth.currentAuthenticatedUser()
      .then(userData => userData)
      .catch(() => console.log('Not signed in'));
  }

  const {googleSignIn, facebookSignIn} = props;

  return (
    <View style={styles.container}>
      <Authenticator
        usernameAttributes="email"
        hideDefault={true}
        authState="signIn">
        <AuthScreens />
      </Authenticator>
      {!user && (
        <View style={{marginBottom: 200}}>
          <Text style={{textAlign: 'center'}}> - OR - </Text>
          <Button title="Login with Google" onPress={googleSignIn} />
          <Button title="Login with Facebook" onPress={facebookSignIn} />
        </View>
      )}
    </View>
  );
};

export default withOAuth(App);

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

如何解决此问题以填满模拟器屏幕？

Answer 1

我自己解决了这个问题。

其实问题出在tabBarStyle!!!!

这是 Navigation.js 中的固定代码：

import * as React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {Text, Dimensions} from 'react-native';

import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';
import ProfileScreen from '../screens/ProfileScreen';

const fullScreenWidth = Dimensions.get('window').width;

const Stack = createStackNavigator();

function HomeStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function AboutStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="AboutScreen" component={AboutScreen} />
    </Stack.Navigator>
  );
}

function ProfileStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function Navigation(props) {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          headerTitle: () => {
            return <Text>Header</Text>;
          },
          tabBarIcon: ({focused, color, size, padding}) => {
            let iconName;
            if (route.name === 'Home') {
              iconName = focused ? 'home' : 'home-outline';
            } else if (route.name === 'About') {
              iconName = focused
                ? 'information-circle'
                : 'information-circle-outline';
            } else if (route.name === 'Profile') {
              iconName = focused ? 'person' : 'person-outline';
            }
            return (
              <Ionicons
                name={iconName}
                size={size}
                color={color}
                style={{paddingBottom: padding}}
              />
            );
          },
          tabBarActiveTintColor: 'lightseagreen',
          tabBarInactiveTintColor: 'grey',
          tabBarLableStyle: {fontSize: 16},
          tabBarStyle: {width: fullScreenWidth},
        })}>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="About" component={AboutStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

export default Navigation;

如何让 react-native 导航屏幕填满 ios 模拟器屏幕

How to make react-native navigation screen fill up ios simulator screen

javascript

ios

reactjs

react-native

react-navigation