如何在 React Native 中将元素放置在底部选项卡导航器上

Question

我想使用 react-native-fbads 将 Facebook 广告放置到 React Native。我在我的应用程序中使用Bottom tab navigator，我希望将广告固定在底部标签上方。

我可以将广告放置在每个标签屏幕上，但我不想将广告放置在每个屏幕上，而是将其放置在底部标签上方，以便在用户访问的每个标签上都可见。

类似这样的：

代码： TabNavigator.js

             <Tab.Navigator
                screenOptions={({ route }) => ({
                   headerShown: false,
                })}
                tabBarOptions={{
                    activeTintColor: '#001B79',
                    inactiveTintColor: 'gray',
                }}
              >
                <Tab.Screen name="Home1" component={Home11} />
                <Tab.Screen name="Home2" component={Home12} />
            </Tab.Navigator>
   

我想添加 <BannerAd /> 以便它可以像我希望的那样工作。

Answer 1

尝试使用bottom-tab-navigator！定期！

// ...
import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            // The `merge: true` option makes sure that the params inside the tab screen are preserved
            navigation.navigate({ name: route.name, merge: true });
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
  {...}
</Tab.Navigator>