首页 文章

React-Native页脚不是静态的

提问于
浏览 次
0

我为反应本机应用程序创建了一个页脚 . 它没有固定在底部 . 当键盘打开时，页脚也会向上移动 . 这是我的代码 . 我怎样才能在底部有一个固定的页脚？

export const TabNavFooter = TabNavigator(
  {
    mainfeed: { screen: MainFeedScreen },
    workout: { screen: WorkoutScreen },
    videos: { screen: VideosScreen },
    chat: { screen: ChatScreen },
    profile: { screen: ProfilePageScreen }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === "chat") {
          iconName = `message${focused ? "" : "-outline"}`;
        } else if (routeName === "profile") {
          iconName = `account${focused ? "" : "-outline"}`;
        }

        return <Icon name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: "bottom",
    tabBarOptions: {
      activeTintColor: "blue",
      inactiveTintColor: "gray"
    },
    swipeEnabled: false,
    lazyLoad: true,
    animationEnabled: false
  }
);
react-native

1 回答

  • 1

    除非您尝试关注的选项卡上有一些叠加组件，否则通常不会发生这种情况 .

    要将TabBar固定到屏幕底部，请添加 tab styles as

    tabBarOptions: {
            //... Other props
            style: {
                position: 'absolute',
                bottom: 0,
                right: 0,
                left: 0,
                height: 54,
            }
        }
    回复于

相关问题