Question

我有这个react-navigation TabNavigator组件，问题是当表单输入被聚焦时，TabNavigator页脚出现在键盘顶部，它只在Android上发生。怎么解决这个？我试过添加样式，如位置：'绝对'，底部：0 在tabBarOptions中。这是我的TabNavigator

export const AuthTaber = TabNavigator(
  {
    Signin: { screen: Signin },
    Signup: { screen: Signup }
  },
  {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    lazy: true,
    tabBarComponent: props => {
      return(
        <Footer>
          <FooterTab style={Style.bgBlack}>
            <Button
              vertical
              // active={props.navigationState.index === 0}
              onPress={() => props.navigation.navigate('Signin')}
              >
              <Text style={Style.white}>Sign In</Text>
            </Button>
            <Button
              vertical
              // active={props.navigationState.index === 1}
              onPress={() => props.navigation.navigate('Signup')}
              >
              <Text style={Style.white}>Sign Up</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    }
  }
);

Answer 1

只需添加此

<activity
.....
        android:windowSoftInputMode="stateUnspecified|adjustPan"

.....

在我的AndroidManifest.xml中

Answer 2

使用View代替页脚和基于本机的页面

   <View style={Style.bgBlack}>    // Do not have width and height in style
      <Button
        vertical
        // active={props.navigationState.index === 0}
        onPress={() => props.navigation.navigate("Signin")}
      >
        <Text style={Style.white}>Sign In</Text>
      </Button>
      <Button
        vertical
        // active={props.navigationState.index === 1}
        onPress={() => props.navigation.navigate("Signup")}
      >
        <Text style={Style.white}>Sign Up</Text>
      </Button>
    </View>

反应原生页脚出现在android

2 个答案: