1

我正在尝试构建一个具有欢迎页面的身份验证流程，然后根据用户的情况登录或注册。它内置在堆栈导航器中。第一个屏幕没有标题，然后通过他们的屏幕选项登录和注册。

// AuthNavigator
const AuthStackNavigator = createStackNavigator();

export const AuthNavigator = () => {
  return (
    <AuthStackNavigator.Navigator
      initialRouteName={WELCOME_PAGE.id}
      screenOptions={{
        headerShown: false,
        headerTintColor: colors.primary,
      }}
      lazy>
      <AuthStackNavigator.Screen
        name={WELCOME_PAGE.id}
        component={WELCOME_PAGE.component}
      />
      <AuthStackNavigator.Screen
        name={LOGIN_PAGE.id}
        component={LOGIN_PAGE.component}
        options={LOGIN_PAGE.options}
      />
      <AuthStackNavigator.Screen
        name={SIGN_UP_PAGE.id}
        component={SIGN_UP_PAGE.component}
        options={LOGIN_PAGE.options}
      />
    </AuthStackNavigator.Navigator>
  );
};

此流程嵌套在 tabNavigator 中：

// AuthTabNavigator
const AuthTabNavigator =
  Platform.OS === 'android'
    ? createMaterialBottomTabNavigator()
    : createBottomTabNavigator();

const RootNavigator = () => {
  return (
    <AuthTabNavigator.Navigator
      activeColor={colors.primary}
      inactiveColor="grey"
      barStyle={materialBottomNavBackgroundColor}
      tabBarOptions={defaultTabNavOptions}>
      <AuthTabNavigator.Screen
        name={WELCOME_PAGE.id}
        component={AuthNavigator}
        options={WELCOME_PAGE.options}
      />
    </AuthTabNavigator.Navigator>
  );
};

export default RootNavigator;

在 iOS 上，一切正常，但在 Android 上，它的行为很奇怪。按下输入字段时，键盘会推动底部栏，从而在按下时产生笨拙的效果，但也会在关闭字段时产生笨拙的效果。好像它每次都在重新计算高度并重新定位布局。

为了确保它不是来自我的代码，我使用React Native 文档中的代码片段再次进行了测试

我得到以下信息（这些在 Android 模拟器上，但在我的 OnePlus android 手机上得到相同的结果）

唯一有效的版本是没有嵌套在选项卡导航器中的版本，所以我想问题来自那里。

我检查了一些解决方案，但没有一个有效：

我正在使用 React Native CLI：

"react-native": "0.62.2",
"@react-navigation/bottom-tabs": "^5.2.8",
"@react-navigation/drawer": "^5.7.2",
"@react-navigation/material-bottom-tabs": "^5.1.10",
"@react-navigation/native": "^5.1.7",
"@react-navigation/stack": "^5.2.17",

如果您遇到相同的问题并找到解决方法，请告诉我。提前致谢。

编辑：我使用的解决方案

除了我在评论中发布的“自定义”解决方案之外，在 React Navigation repo 上打开一个问题并检查已关闭的问题后，我发现在 Android 上，您可能有 2 个选项：

  • 您可以反转嵌套，请参见此处

  • 或者您可以将keyboardAvoidingView 的行为设置为在Android 上的位置并提供自定义Tabbar

https://github.com/react-navigation/react-navigation/issues/7359#issuecomment-545842090

https://stackoverflow.com/a/51169574/11287266

我最终选择了后者：

const TabBarComponent = props => {
  return (
    <View collapsable={false}>
      <BottomTabBar {...props} />
    </View>
  );
};

// AuthTabNavigator
const AuthTabNavigator = createBottomTabNavigator();

const RootNavigator = () => {
  return (
    <AuthTabNavigator.Navigator
      activeColor={colors.primary}
      inactiveColor="grey"
      barStyle={materialBottomNavBackgroundColor}
      tabBarOptions={defaultTabNavOptions}
      tabBar={props => <TabBarComponent {...props} />}>
      <AuthTabNavigator.Screen
        name={WELCOME_PAGE.id}
        component={AuthNavigator}
        options={WELCOME_PAGE.options}
      />
    </AuthTabNavigator.Navigator>
  );
};

export default RootNavigator;

      <KeyboardAvoidingView
        contentContainerStyle={{ flexGrow: 1 }}
        style={styles.container}
        behavior={Platform.OS === 'ios' ? 'padding' : 'position'}
        keyboardVerticalOffset={Platform.OS === 'android' ? -50 : 25}>

4

0 回答 0