【问题标题】:How to place element over Bottom Tabs Navigator in React Native如何在 React Native 中将元素放置在底部选项卡导航器上
【发布时间】:2021-09-08 12:28:32
【问题描述】:

我想使用 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>
   

我想添加 &lt;BannerAd /&gt; 以便它可以像我希望的那样工作。

【问题讨论】:

    标签: reactjs react-native react-navigation


    【解决方案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>
    

    【讨论】:

    • 您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息,例如引用或文档,以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center
    猜你喜欢
    • 2023-02-07
    • 1970-01-01
    • 1970-01-01
    • 2020-04-05
    • 2022-10-05
    • 1970-01-01
    • 1970-01-01
    • 2022-12-24
    • 2021-10-09
    相关资源
    最近更新 更多